js事件委托

Posted 2021-02-16 llc-Mite

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操作