JavaScript事件代理和委托（Delegation）

野性酷女 2022-07-16 06:48 265阅读 0赞

### JavaScript事件代理 ###

首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制，后面会详细介绍。

假设有一个 UL 的父节点，包含了很多个 Li 的子节点：

[![复制代码][copycode.gif]][copycode.gif 1]

<ul id="parent-list">
      <li id="post-1">Item 1</li>
      <li id="post-2">Item 2</li>
      <li id="post-3">Item 3</li>
      <li id="post-4">Item 4</li>
      <li id="post-5">Item 5</li>
      <li id="post-6">Item 6</li>
    </ul>

[![复制代码][copycode.gif]][copycode.gif 1]

当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都添加一些类似onMouseOver或者onClick之类的事件监听。

[![复制代码][copycode.gif]][copycode.gif 1]

function addListeners4Li(liNode){
        liNode.onclick = function clickHandler(){...};
        liNode.onmouseover = function mouseOverHandler(){...}
    }
    
    window.onload = function(){
        var ulNode = document.getElementById("parent-list");
        var liNodes = ulNode.getElementByTagName("Li");
        for(var i=0, l = liNodes.length; i < l; i++){
            addListeners4Li(liNodes[i]);
        }   
    }

[![复制代码][copycode.gif]][copycode.gif 1]

如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListeners4Li方法来为每个Li节点添加事件处理函数。这就添加的复杂度和出错的可能性。

更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成我们想要的效果：

[![复制代码][copycode.gif]][copycode.gif 1]

// 获取父节点，并为它添加一个click事件
    document.getElementById("parent-list").addEventListener("click",function(e) {
         
      // 检查事件源e.targe是否为Li
      if(e.target && e.target.nodeName.toUpperCase == "LI") {
        // 真正的处理过程在这里
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
      }
    });

[![复制代码][copycode.gif]][copycode.gif 1]

为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理。

### 事件冒泡及捕获 ###

之前的介绍中已经说到了浏览器的事件冒泡机制。这里再详细介绍一下浏览器处理DOM事件的过程。对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里我们主要介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。如图：

![18141423-8bd09a9c1e184df9a13b6e26b88348f3.jpg][]

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来组织事件的冒泡传播。

### jQuery和Dojo中delegate函数 ###

下面看一下Dojo和[jQuery][]中提供的事件代理接口的使用方法。

首先是jQuery：

$("#link-list").delegate("a", "click", function(){
      // "$(this)" is the node that was clicked
      console.log("you clicked a link!",$(this));
    });

jQuery的delegate的方法需要三个参数，一个选择器，一个事件名称，和事件处理函数。

### 优点 ###

通过上面的介绍，大家应该能够体会到使用事件委托对于web应用程序带来的几个优点：

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。

2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

3.[JavaScript][]和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

写到这里，突然想起了之前对于Dojo DataGrid的困惑：那么多的rows和cells，如何处理他们事件之间的关系。现在想想，使用委托就很简单了。所有的事件委托到grid最外层的节点上，当事件发生的时候通过一些方法来获取和添加事件的额外属性，如rowIndex, cellIndex，之后在分配到onRowClick,onCellClick之类的处理函数上。

[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[copycode.gif 1]: /images/20220716/622d5583886c428c898a34b801d3e1ba.png
[18141423-8bd09a9c1e184df9a13b6e26b88348f3.jpg]: /images/20220716/f6422a2e92ac48d1a69ccaac80aa7732.png
[jQuery]: http://lib.csdn.net/base/jquery
[JavaScript]: http://lib.csdn.net/base/javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中的事件委托（event delegation）

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ JavaScript事件委托 ⭐ 事件冒泡（Event Bubbling） ⭐ 事件委托的优点

矫情吗；*/ 2023年10月15日 12:59/ 0 赞/ 16 阅读

相关 JS事件冒泡和事件代理（委托）

事件冒泡当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window <!DOCTYPE html> <html lang="en">

桃扇骨/ 2022年12月13日 12:51/ 0 赞/ 265 阅读

相关委托(Delegate) 和事件（Event）

委托的声明 public delegate void MyDelegate(string str); 注 1.委托的定义和方法的定义类似，只是在前面加了一个deleg

柔光的暖阳◎/ 2022年08月05日 00:50/ 0 赞/ 252 阅读

相关 JavaScript事件代理和委托（Delegation）

JavaScript事件代理首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事

野性酷女/ 2022年07月16日 06:48/ 0 赞/ 266 阅读

相关 javascript-委托事件(事件代理)

1.什么是委托事件？委托事件也叫做事件代理意思是一样的,就好像精灵图也叫雪碧图!!!只是不同叫法. 试想一下:假设公司里每次收快递的时候员工都跑到公司门口去收自己

我就是我/ 2022年06月12日 09:38/ 0 赞/ 289 阅读

相关 js事件委托（事件代理）

[js中的事件委托或是事件代理详解][js] 起因： 1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的； 2、其实我一直都没弄明白，写这个一是为了备忘，

「爱情、让人受尽委屈。」/ 2022年05月21日 13:30/ 0 赞/ 267 阅读

相关协议(Protocol)与委托代理(Delegate)

[协议(Protocol)与委托代理(Delegate)][Protocol_Delegate] 协议(Protocol)的作用： 1. 规范接口，用来定义一套公用的接

超、凢脫俗/ 2022年03月22日 11:09/ 0 赞/ 247 阅读

相关 JavaScript系列—简述JS中的事件委托和事件代理

JS中的事件委托和事件代理什么是事件委托？事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。

我就是我/ 2021年11月16日 15:24/ 0 赞/ 348 阅读

相关 jq 事件委托delegate

法一:$('要委托的父元素选择器').delegate('子元素选择器','无on的事件',function(){...}) 法二:$('父元素选择器').on

小鱼儿/ 2021年07月24日 18:59/ 0 赞/ 471 阅读

相关 javascript事件委托和jquery事件委托

javascript事件委托和jquery事件委托初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查...

朱雀/ 2020年07月02日 07:28/ 0 赞/ 1100 阅读