6. 在JavaScript中使用事件委托

最编程 2024-08-07 15:09:42

...

一、什么是事件委托

”过多的事件处理程序“的解决方法就是使用 事件委托 。事件委托是利用事件冒泡，可以只使用一个事件处理程序，来管理一种类型的事件。

例如：

click事件冒泡到document，这也就意味着可以为整个页面指定onclick事件处理程序，而不用为每个可点击元素分别指定事件处理程序。

HTML：

1 <ul>
2     <li id="one">one</li>
3     <li id="two">two</li>
4     <li id="three">three</li>
5 </ul>

JavaScript：

 1 let item1=document.getElementById("#one");
 2 let item2=document.getElementById("#two");
 3 let item3=document.getElementById("#three");
 4 
 5 item1.onclick=function(){
 6     console.log("第一个点击事件")
 7 };
 8 item2.onclick=function(){
 9     console.log("第二个点击事件")
10 };
11 item3.onclick=function(){
12     console.log("第三个点击事件")
13 };

解释：

如果对页面中所有需要使用到onclick事件处理程序的元素都是用类似的方法，结果就会出现大片雷同的，只为指定事件处理程序的代码，使用事件委托，只要给所有元素共同的祖先节点添加一个事件处理程序就可以解决

例如：

    let list = document.querySelector("ul");
    list.onclick = function (event) {//event：可以根据event来获取触发源
        let target = (event.target)//因为event获取的是一个pointerEvent对象，触发源在该对象的target属性里
        switch (target.id) {//通过switch去判断触发源的id是什么
            case "one":
                console.log("这是第一个li");
                break;
            case "two":
                console.log("这是第二个li");
                break;
            case "three":
                console.log("这是第三个li");
                break;
        }
    }

解释：

这里给所有的li父元素添加了一个onlickc事件处理程序。因为所有的li都是ul元素的后代，所以他们的事件会向上冒泡，最终都会由这个函数来处理。
但事件目标是每个点击的列表项，只需要检查event对象的id属性，就可以确定，然后再执行对应的操作
因为访问了一个dom元素和添加了一个事件处理程序。结果对用户而言没有太大的区别，但 这种方式占用的内存更少 ，所有使用按钮事件（鼠标事件和键盘事件）都适用于该方案

总结：

只要可行，就应该考虑只给document添加一个事件处理程序，通过它处理页面中所有某种类型的事件。相对于之前的技术：

document 对象随时可用，任何时候都可以给它添加事件处理程序。这也意味着只要页面渲染出可点击的元素，就可以无延迟地起作用
节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省DOM元素的引用，也可以节省时间
减少整个页面所需的内存，提升整体性能

事件冒泡的优点：

简化代码：事件冒泡可以使代码更加简化，因为不需要为每个子元素都添加事件监听器。只需将监听器添加到父元素上，就可以处理子元素上的事件。
可以实现事件委托：事件委托是指将事件处理程序添加到父元素上，以处理由子元素触发的事件。这是一种更有效的方法，因为它可以减少事件处理程序的数量，从而提高性能。
可以提高代码的可维护性：由于事件冒泡可以简化代码和实现事件委托，因此可以提高代码的可维护性。如果需要更改事件处理程序，只需更改父元素上的处理程序即可。

事件冒泡的缺点：（存在问题！）

性能问题：事件冒泡可以导致性能问题，特别是在处理大量事件时。在这种情况下，最好直接将事件处理程序添加到子元素上，而不是将其添加到父元素上。
捕获和冒泡的顺序问题：在事件冒泡中，事件首先被捕获到最底层的元素，然后逐级向上冒泡到父元素。这可能会导致处理程序在不同元素上的调用顺序与预期不同。
事件对象的处理问题：在事件冒泡中，事件对象首先被处理的是最内层的元素，然后是它的父元素，以此类推。这可能会导致处理程序在不同元素上的事件对象与预期不同。

最适合使用事件委托的时间包括：

click：表示鼠标单击事件，即鼠标按下去并释放的动作

mousedown：表示鼠标按下事件

mouseup：表示鼠标释放事件

keydown ：表示鼠标按下事件

keypress：表示键盘事件，即键盘按下去并释放的动作

然而mouseover和mouseout时事件冒泡、但很难适当处理，且经常需要计算元素的位置（因为mouseout 会在光标从一个元素移动到他的一个后代节点以及移动元素之外时触发）

上一篇：玩转 HTML 事件：深度理解事件流与事件委托

下一篇：事件代理是什么？常见用例解析

6. 在JavaScript中使用事件委托

一、什么是事件委托

用 JavaScript 实现事件代理（事件委托）

6. 在JavaScript中使用事件委托

用 JavaScript 实现事件代理（事件委托）

轻松掌握JavaScript事件委托：用jQuery的.on方法一网打尽