diff --git a/04-JavaScript基础/29-事件委托.md b/04-JavaScript基础/29-事件委托.md
index 6c578be..fef290e 100644
--- a/04-JavaScript基础/29-事件委托.md
+++ b/04-JavaScript基础/29-事件委托.md
@@ -3,59 +3,75 @@
事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素。
-比如说有一个列表 ul,列表之中有大量的列表项 li:
+比如说有一个列表 ul,列表之中有大量的列表项 ``标签:
```html
- - Item 1
- - Item 2
- - Item 3
- - Item 4
- - Item 5
- - Item 6
+ - 超链接一
+ - 超链接二
+ - 超链接三
```
-当我们的鼠标移到Li上的时候,需要获取此Li的相关信息并飘出悬浮窗以显示详细信息,或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法,是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听:
+当我们的鼠标移到``标签上的时候,需要获取此``的相关信息并飘出悬浮窗以显示详细信息,或者当某个``被点击的时候需要触发相应的处理事件。我们通常的写法,是为每个``都绑定类似onMouseOver或者onClick之类的事件监听:
```javascript
- //每个 li 中做的事情
- 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]);
+ 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` 上,然后在执行事件的时候再去匹配判断目标元素。如下:
-```javascript
- // 获取父节点,并为它注册click事件。 false 表示事件在冒泡阶段触发(默认)
- document.getElementById("parent-list").addEventListener("click", function (e) {
- // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回
- if (e.target && e.target.nodeName.toUpperCase() == "LI") {
- // 真正的处理过程在这里
- console.log("List item ", e.target.id, " was clicked!");
- }
- }, false);
+```html
+
+
+
+
+
+
+
+
+
+
```
-
上方代码,为父节点注册click事件,当子节点被点击的时候,click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后,开始执行方法体里的内容:通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息,并作处理。
-换而言之,事件是在父节点上注册的,参数为false,说明事件是在冒泡阶段触发(往上传递),那就只有父节点能拿到事件,子节点是不可能拿到事件的。
+换而言之,参数为false,说明事件是在冒泡阶段触发(子元素向父元素传递事件)。而父节点注册了事件函数,子节点没有注册事件函数,此时,会在父节点中执行函数体里的代码。
-所以事件委托可以减少大量的内存消耗,提高效率。
+**总结**:事件委托是利用了冒泡机制,减少了事件绑定的次数,减少内存消耗,提高性能。
事件委托的参考链接: