前端学习＜四＞JavaScript基础——43-事件委托

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#117700"><</span><span style="color:#117700">ul</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"parent-list"</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"my_link"</span><span style="color:#117700">></span>超链接一<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"my_link"</span><span style="color:#117700">></span>超链接二<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"my_link"</span><span style="color:#117700">></span>超链接三<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
 <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span></span></span>

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

<span style="background-color:#f8f8f8"><span style="color:#333333">     <span style="color:#000000">window</span>.<span style="color:#000000">onload</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>(){
         <span style="color:#770088">var</span> <span style="color:#0000ff">parentNode</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementById</span>(<span style="color:#aa1111">"parent-list"</span>);
         <span style="color:#770088">var</span> <span style="color:#0000ff">aNodes</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">parentNode</span>.<span style="color:#000000">getElementByTagName</span>(<span style="color:#aa1111">"a"</span>);
         <span style="color:#770088">for</span>(<span style="color:#770088">var</span> <span style="color:#0000ff">i</span><span style="color:#981a1a">=</span><span style="color:#116644">0</span>, <span style="color:#0000ff">l</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">aNodes</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">l</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
 ​
             <span style="color:#0055aa">aNodes</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>() {
                 <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'我是超链接 a 的单击相应函数'</span>);
             }
         }
     }</span></span>

但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

<span style="background-color:#f8f8f8"><span style="color:#333333">     <span style="color:#555555"><!DOCTYPE html></span>
 <span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span> <span style="color:#117700">/></span>
         <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">script</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text/javascript"</span><span style="color:#117700">></span>
             <span style="color:#000000">window</span>.<span style="color:#000000">onload</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>() {
 ​
                 <span style="color:#aa5500">// 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）</span>
                 <span style="color:#000000">document</span>.<span style="color:#000000">getElementById</span>(<span style="color:#aa1111">'parent-list'</span>).<span style="color:#000000">addEventListener</span>(<span style="color:#aa1111">'click'</span>, <span style="color:#770088">function</span>(<span style="color:#0000ff">event</span>) {
                     <span style="color:#0055aa">event</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">event</span> <span style="color:#981a1a">||</span> <span style="color:#000000">window</span>.<span style="color:#000000">event</span>;
 ​
                     <span style="color:#aa5500">// e.target 表示：触发事件的对象</span>
                     <span style="color:#aa5500">//如果触发事件的对象是我们期望的元素，则执行；否则不执行</span>
                     <span style="color:#770088">if</span> (<span style="color:#0055aa">event</span>.<span style="color:#000000">target</span> <span style="color:#981a1a">&&</span> <span style="color:#0055aa">event</span>.<span style="color:#000000">target</span>.<span style="color:#000000">className</span> <span style="color:#981a1a">==</span> <span style="color:#aa1111">'link'</span>) {
                     <span style="color:#aa5500">// 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {</span>
                         <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'我是ul的单击响应函数'</span>);
                     }
                 }, <span style="color:#221199">false</span>);
             };
         <span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
     <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
         <span style="color:#117700"><</span><span style="color:#117700">ul</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"parent-list"</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"background-color: #bfa;"</span><span style="color:#117700">></span>
             <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>
                 <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>我是p元素<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
             <span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
             <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"link"</span><span style="color:#117700">></span>超链接一<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
             <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"link"</span><span style="color:#117700">></span>超链接二<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
             <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"javascript:;"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"link"</span><span style="color:#117700">></span>超链接三<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
         <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
     <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span></span></span>

上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。

换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。

总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。

事件委托的参考链接：

• 荐 | JavaScript事件代理和委托（Delegation）

• JavaScript 事件委托详解

我的公众号

想学习更多技能？不妨关注我的公号：猿小馆

写在最后：希望大家可以点个关注点个赞，这对up真的很重要！谢谢！