update: rename

2019-12-13 15:28:05 +08:00
parent 32956bb0af
commit e85ea191ce
27 changed files with 1 additions and 1 deletions
--- a/04-JavaScript基础/47-事件委托.md
+++ b/04-JavaScript基础/47-事件委托.md
@@ -0,0 +1,96 @@
+
+## 事件委托
+
+事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。
+
+比如说有一个列表 ul，列表之中有大量的列表项 `<a>`标签：
+
+```html
+<ul id="parent-list">
+    <li><a href="javascript:;" class="my_link">超链接一</a></li>
+    <li><a href="javascript:;" class="my_link">超链接二</a></li>
+    <li><a href="javascript:;" class="my_link">超链接三</a></li>
+</ul>
+```
+
+当我们的鼠标移到`<a>`标签上的时候，需要获取此`<a>`的相关信息并飘出悬浮窗以显示详细信息，或者当某个`<a>`被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个`<a>`都绑定类似onMouseOver或者onClick之类的事件监听：
+
+```javascript
+    window.onload = function(){
+        var parentNode = document.getElementById("parent-list");
+        var aNodes = parentNode.getElementByTagName("a");
+        for(var i=0, l = aNodes.length; i < l; i++){
+
+            aNodes[i].onclick = function() {
+                console.log('我是超链接 a 的单击相应函数');
+            }
+        }
+    }
+```
+
+但是，上面的做法过于消耗内存和性能。**我们希望，只绑定一次事件，即可应用到多个元素上**，即使元素是后来添加的。
+
+因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：
+
+```html
+    <!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title></title>
+        <script type="text/javascript">
+            window.onload = function() {
+
+                // 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
+                document.getElementById('parent-list').addEventListener('click', function(event) {
+                    event = event || window.event;
+
+                    // e.target 表示：触发事件的对象
+                    //如果触发事件的对象是我们期望的元素，则执行否则不执行
+                    if (event.target && event.target.className == 'link') {
+                    // 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
+                        console.log('我是ul的单击响应函数');
+                    }
+                }, false);
+            };
+        </script>
+    </head>
+    <body>
+        <ul id="parent-list" style="background-color: #bfa;">
+            <li>
+                <p>我是p元素</p>
+            </li>
+            <li><a href="javascript:;" class="link">超链接一</a></li>
+            <li><a href="javascript:;" class="link">超链接二</a></li>
+            <li><a href="javascript:;" class="link">超链接三</a></li>
+        </ul>
+    </body>
+```
+
+上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始**向父节点冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点`<a>`。从而可以获取到相应的信息，并作处理。
+
+换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。
+
+**总结**：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。
+
+事件委托的参考链接：
+
+- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)
+
+- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
+
+
+
+
+
+## 我的公众号
+
+想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+![](http://img.smyhvae.com/20190101.png)
+
+
+
+