事件委托

什么是事件委托

事件委托又叫事件委派或事件代理，javascript高级程序设计中讲到，对“事件处理程序过多”问题的解决方案就是事件委托，事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的事件。通俗的讲就是将原本需要绑定到发生事件的具体某个元素上的事件处理程序统一绑定到其父辈元素上，解决“事件处理程序过多”的问题。

那么什么样的事件其事件处理程序可以绑定到其父辈元素上呢？

比如：click,mousedown,mouseup,keydown,keyup,keypress,像这样具有冒泡特性的事件，而mouseover和mouseout虽然也有事件冒泡，但是处理他们的时候需要特别注意，因为需要经常计算它们的位置，处理起来不太容易。还有就是像focus，blur这样本身就没有冒泡特性的事件，自然也就不能用事件委托了。

不使用事件委托可能存在的问题

如果为每一个可能发生事件的元素单独绑定一个事件处理程序，这样当添加到页面中的事件处理程序的数量很多时，将会直接影响到页面的运行性能。出现这一问题的原因主要有两个，第一，每个函数都是对象，都会占用内存，内存中的对象越多，性能就越差。第二，必须事先指定所有的事件处理程而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

事件委托的好处

第一，大量减少内存占用，减少DOM访问次数，提升页面的整体运行性能。
第二，为新增的子元素动态绑定事件处理程序。

事件委托的实现

<ul id = "father">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

现在我们要使用事件委托的方法实现这样的效果：
当点击列表中的每一个列表项时，为该列表项添加一个红色背景

var father = document.getElementById("father");
    father.onclick = function(event){
    var event  = event || window.event;
    var target = event.target || event.srcElement;
    target.style.backgroundColor = "red";
};
var li = document.createElement("li");
li.innerText = "five";
father.appendChild(li);

在上边的程序中

    var event  = event || window.event;
    var target = event.target || event.srcElement;

这两行代码用来解决与IE浏览器兼容性的问题，最后的这行用来返回发生事件的目标节点

由这个程序我们可以看到，只需要为父辈元素绑定一次事件处理程序就可以达到与为其子元素分别绑定事件处理程序同样的效果，并且不需要为新增加的元素再另外绑定事件处理程序。通过这样的操作可以提高页面的运行性能。

如果同一类事件对于不同的元素所执行的操作不同时，还可以用事件委托吗？答案是可以的。

例子附上:

<ul id = "father">
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
</ul>

现在我们要使用事件委托的方法实现这样的效果：
当点击列表中的每一个列表项时，为该列表项添加不同的背景颜色

var father = document.getElementById("father");   
    father.onclick = function(event){
    var event  = event || window.event;
    var target = event.target || event.srcElement;
    switch(target.id){
        case 'one':
            target.style.backgroundColor = "red";
            break;
        case 'two':
            target.style.backgroundColor = "green";
            break;
        case 'three':
            target.style.backgroundColor = "blue";
            break;
        case 'four':
            target.style.backgroundColor = "yellow";
            break;
        }
};

好了，今天的分享就到这里了，以上纯属个人见解，有什么不对的地方还请大家指出，不胜感激。

本文地址：https://blog.csdn.net/qq_44555964/article/details/107480298