码迷,mamicode.com
首页 > Web开发 > 详细

js事件委托

时间:2019-04-13 10:40:16      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:点击   ||   spl   get   onclick   use   doc   app   onload   

1)什么是事件委托?

    通过给父节点事件(委托给父节点)没然后通过事件的event对象去查找子节点(点击子节点会冒泡),然后对子节点进行需要的操作。

    使用场景:当节点未渲染出来,无法获取到该子节点。或者子节点数量多,需要挨个遍历给事件,很消耗资源

技术图片
window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName(‘li‘);
            var num = 4;
            
            //事件委托,添加的子元素也有事件
            oUl.onmouseover = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == ‘li‘){
                    target.style.background = "red";
                }
                
            };
            oUl.onmouseout = function(ev){
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLowerCase() == ‘li‘){
                    target.style.background = "#fff";
                }
                
            };
            
            //添加新节点
            oBtn.onclick = function(){
                num++;
                var oLi = document.createElement(‘li‘);
                oLi.innerHTML = 111*num;
                oUl.appendChild(oLi);
            };
        }
View Code

好处:我们可以给未渲染出来的节点进行操作,可以减少dom操作

js事件委托

标签:点击   ||   spl   get   onclick   use   doc   app   onload   

原文地址:https://www.cnblogs.com/llcMite/p/10699915.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!