yuanyuanbyte/Blog

JavaScript 深入系列之 事件委托（事件代理）

yuanyuanbyte opened this issue · 0 comments

yuanyuanbyte commented

本系列的主题是 JavaScript 深入系列，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

事件委托（事件代理）

“过多事件处理程序”的解决方案是使用事件委托，也叫事件代理。事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。例如， click 事件冒泡到 document 。这意味着可以为整个页面指定一个 onclick 事件处理程序，而不用为每个可点击元素分别指定事件处理程序。比如有以下HTML：

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

这里的HTML包含3个列表项，在被点击时应该执行某个操作。对此，通常的做法是像这样指定3个事件处理程序：

let item1 = document.getElementById("goSomewhere");
let item2 = document.getElementById("doSomething");
let item3 = document.getElementById("sayHi");
item1.addEventListener("click", (event) => {
    location.href = "http://www.wrox.com ";
});
item2.addEventListener("click ", (event) => {
    document.title = "I changed the document 's title";
});
item3.addEventListener("click", (event) => {
    console.log("hi");
});

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

let list = document.getElementById("myLinks");
list.addEventListener("click", (event) => {
    let target = event.target;
    switch (target.id) {
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http:// www.wrox.com";
            break;
        case "sayHi":
            console.log("hi");
            break;
    }
});

这里只给 <ul id="myLinks"> 元素添加了一个 onclick 事件处理程序。因为所有列表项都是这个元素的后代，所以它们的事件会向上冒泡，最终都会由这个函数来处理。但事件目标是每个被点击的列表项，只要检查 event 对象的 id 属性就可以确定，然后再执行相应的操作即可。相对于前面不使用事件委托的代码，这里的代码不会导致先期延迟，因为只访问了一个DOM元素和添加了一个事件处理程序。结果对用户来说没有区别，但这种方式占用内存更少。所有使用按钮的事件（大多数鼠标事件和键盘事件）都适用于这个解决方案。

再讲一个通俗易懂的例子：

假如我们要为 ul 列表下的每个 li 标签添加点击事件，如果不使用事件委托，最简单的办法就是使用循环来为每个 li 标签绑定事件，示例代码如下：

 <ul id="list">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
 </ul>
 <script>
     window.onload = function(){
         var the_ul = document.getElementById('list');
         var the_li = the_ul.getElementsByTagName('li');
         for( var i=0; i < the_li.length; i++ ){
             the_li[i].onclick = function(){
                 console.log(this.innerHTML)
             }
         }
     }
 </script>

通过上面的代码可以看出，要为每个 li 标签绑定点击事件，首先需要找到 ul 标签，然后通过 ul 标签找到所有 li 标签， 最后在通过遍历所有 li 标签来绑定事件。若使用事件委托的话，就会简单很多，示例代码如下：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    window.onload = function () {
        var the_ul = document.getElementById('list');
        the_ul.onclick = function (e) {
            console.log(e.target.innerHTML)
        }
    }
</script>

通过代码可以看出，使用事件委托我们只需要为 ul 标签绑定事件，当 li 标签被点击时，由于事件冒泡的特性，它们的事件会向上冒泡，最终都会由ul的函数来处理。

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

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

最适合使用事件委托的事件包括： click 、 mousedown 、 mouseup 、 keydown 和 keypress 。 mouseover 和 mouseout 事件冒泡，但很难适当处理，且经常需要计算元素位置（因为 mouseout 会在光标从一个元素移动到它的一个后代节点以及移出元素之外时触发）。

参考：

查看全部文章

博文系列目录

  • JavaScript 深入系列
  • JavaScript 专题系列
  • JavaScript 基础系列
  • 网络系列
  • 浏览器系列
  • Webpack 系列
  • Vue 系列
  • 性能优化与网络安全系列
  • HTML 应知应会系列
  • CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

weixin