webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 事件委托

Browse Source
This commit is contained in:
qianguyihao 2019-11-12 20:21:25 +08:00
parent e947d2d9f8
commit 43247d22d1
1 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
04-JavaScript基础/29-事件委托.md
View File

@ -3,59 +3,75 @@
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。
比如说有一个列表 ul，列表之中有大量的列表项 li：
比如说有一个列表 ul，列表之中有大量的列表项 `<a>`标签：
```html
<ul id="parent-list">
<li id="li-1">Item 1</li>
<li id="li-2">Item 2</li>
<li id="li-3">Item 3</li>
<li id="li-4">Item 4</li>
<li id="li-5">Item 5</li>
<li id="li-6">Item 6</li>
<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>
```
当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听：
当我们的鼠标移到`<a>`标签上的时候，需要获取此`<a>`的相关信息并飘出悬浮窗以显示详细信息，或者当某个`<a>`被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个`<a>`都绑定类似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!");
```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事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。
换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。
换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。
所以事件委托可以减少大量的内存消耗，提高效率。
**总结**：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。
事件委托的参考链接：