From 43247d22d10d5cd72e69af4cf2b9a2f61b099419 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 12 Nov 2019 20:21:25 +0800 Subject: [PATCH] =?UTF-8?q?update:=20=E4=BA=8B=E4=BB=B6=E5=A7=94=E6=89=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 04-JavaScript基础/29-事件委托.md | 78 +++++++++++++++++++------------- 1 file changed, 47 insertions(+), 31 deletions(-) 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 ``` -当我们的鼠标移到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，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。 -所以事件委托可以减少大量的内存消耗，提高效率。 +**总结**：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。 事件委托的参考链接：