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 //是不是很麻烦，而事件委托就不需要这么做。