委托事件
如果我想给ul中的每一个li元素都添加一个事件，可以这么写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<script>
var lis = document.querySelectorAll("li");
var len = lis.length;
for (var i = 0; i < len; i++) {
var li = lis[i];
li.addEventListener("click", function(event) {
console.log(event.target.textContent);
});
}
</script>
|
下面给页面中添加一个按钮，按钮点击后，给ul的结尾新增一个li元素，内容是pear:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<button type="button">添加水果</button>
<script>
var lis = document.querySelectorAll("li");
var len = lis.length;
for (var i = 0; i < len; i++) {
var li = lis[i];
li.addEventListener("click", function(event) {
console.log(event.target.textContent);
});
}
var btn = document.querySelector("button");
// 点击按钮后，新增一个li标签，内容是pear
btn.addEventListener("click", function() {
var li = document.querySelector("li");
var ele = li.cloneNode(true);
ele.textContent = "pear";
li.parentNode.appendChild(ele);
});
</script>
|
点击按钮之后，发现了一个问题：新增的li元素上是没有点击事件的，如果再单独给这个li元素新增一个点击事件，无疑是不可取的，这个时候，就可以巧妙地用委托事件来让新增的li元素，自动添加点击事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<button type="button">添加水果</button>
<script>
var ul = document.querySelector("ul");
ul.addEventListener("click", function(event) {
if ((event.target.nodeName = "LI")) {
console.log(event.target.textContent);
}
});
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
var li = document.querySelector("li");
var ele = li.cloneNode(true);
ele.textContent = "pear";
li.parentNode.appendChild(ele);
});
</script>
|
在这次的案例中，我们把点击事件委托给了ul元素，通过event.target来获取用户真实操作的元素，再通过元素的nodeName值来判断该元素是不是li元素，如果是，就弹出该元素的内容。
从最终结果来说，这种写法和使用for循环的结果是相同的，但是for循环添加的事件，不支持新增的li元素，而委托事件中，即便是新增的li元素，点击事件依然有效。
为了更好的实现这种委托事件，我们可以把这种方式封装成一个函数，可以作为简单的参考：
这里的委托函数仅做参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<ul>
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<ul>
<li>11</li>
<li>22</li>
</ul>
<button type="button">添加水果</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
var li = document.querySelector("li");
var ele = li.cloneNode(true);
ele.textContent = "pear";
li.parentNode.appendChild(ele);
});
weituo("click", "ul", "li", function(e) {
console.log(e.target);
});
// 封装成一个委托函数：
function weituo(type, parentSelector, childSelector, fn) {
document.body.addEventListener(type, function(event) {
var parentEles = document.querySelectorAll(parentSelector);
var childEles = document.querySelectorAll(childSelector);
for (var m = 0; m < parentEles.length; m++) {
if (
Array.prototype.includes.call(childEles, event.target) &&
parentEles[m].contains(event.target)
) {
fn(event);
break;
}
}
});
}
</script>
|
有兴趣的可以考虑一下，为什么要把body作为委托对象，而不是遍历页面中所有的ul，把ul作为委托对象。这是因为如果使用遍历把ul作为委托对象，所有的事件，只能针对于页面中已存在的ul元素生效，对于新增加的ul元素是无效的。