前端必会核心--事件代理

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」

为什么要事件代理

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

事件对象和事件委托：

事件类型type

首先我们先写出代码：

这是事件类型，当然事件类型很多类似于 onmouseout,onmouseenter,nomousemove

事件类型target || currentTarget

区别在于target就是我们所选中的元素，而currentTarget是绑定的元素，这里涉及到冒泡，大家可以把代码写下来然后输出打印一下看看

target兼容方式

var target = e.target || e.srcElement 
e.srcElement 兼容firefox，
并不用太纠结这个兼容方式，照着写就行了

事件委托
        var box3 = document.getElementById("box3")
        oLi = document.getElementsByTagName("li")
        li = Array.prototype.slice.call(oLi)
        box3.onclick = function(e){
            var e = e;
            target = e.target;
            console.log(li.indexOf(target));
        }

当然大家看不懂可以看看我写的傻瓜代码

var box3 = document.getElementById("box3")
        oLi = document.getElementsByTagName("li")
        var li = []
        for(var i = 0; i < oLi.length;i++){
            li.push(oLi[i])
        }        
        box3.onclick = function(e){
            var e = e;
            target = e.target;
            console.log(li.indexOf(target));
        }

总结：

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒。可以实现当新增子对象时无需再次对其绑定。