JavaScript事件委托 | 易学教程

JavaScript事件委托（事件代理）

简单来说就是利用事件冒泡的原理，将原本子元素的事件绑定在父元素上

事件委托的优点

提升性能，减少事件绑定

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <ul>
10         <li>1</li>
11         <li>2</li>
12         <li>3</li>
13     </ul>
14 </body>
15 <script>
16     //获取ul里的li
17     var lis = document.querySelectorAll('ul li'); 
18     //循环绑定li的单击事件
19     for(i=0;i<lis.length;i++){ 
20         lis[i].onclick = function(){
21             //单击每个li分别显示各个li的内容
22             console.log(this.innerText)
23         }
24     }
25     //以上代码是平时我们做事件绑定，而用事件委托的方法只需要给父元素绑定事件
26     //用法: 事件对象.target.精准的事件源
27     var ul = document.querySelector('ul');
28     ul.onclick = function(e){
29         //判断是否准确点击到了子元素，标签一定要大写
30         if(e.target.nodeName == "LI"){
31             console.log(e.target.innerText);
32         }
33     }
34 </script>
35 </html>

动态添加的子元素也会具有事件

1     //如果我们又添加一个li放入ul中
2     var ul = document.querySelector('ul');
3     var li = document.createElement('li')
4     li.innerText = 4;
5     ul.appendChild(li);
6     //很明显这个li是没有绑定到事件的，那么我们就需要去重新给li绑定事件
7     //是不是很麻烦，而事件委托就不需要这么做。

来源：https://www.cnblogs.com/lry2577/p/12499769.html

标签