关于JS事件冒泡与JS事件代理（事件委托）

事件作为DOM操作重要的一环，需要大家好好理解和运用，今天特意看了一下事件冒泡和事件代理的相关资料，感触颇深，也深感自己的无知不知道多浪费了多少内存，废话不多说进入正题：

1.事件冒泡：

  通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。

2.事件委托

事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：

有可能在开发的时候会遇到这种情况：如导航每一个栏目都要加一个事件，你可能会通过遍历来给每个栏目添加事件：

1. var ul = document.getElementById(‘parentUl’);

2. ul.onclick=function (event) {  
   

3.   var e = event||window.event,  
   

4.           source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素，在IE中是srcElement  
   

5.     if(source.nodeName.toLowerCase() == "li"){   //判断只有li触发的才会输出内容  
   

6.         alert(source.innerHTML);  
   

7.     }  
   

8.     stopPropagation(e);                           //阻止继续冒泡  
   

9. };  
   

10. function addElement() {  
    

11.     var li = document.createElement('li');  
    

12.     li.innerHTML="我是新孩子";  
    

13.     ul.appendChild(li);  
    

14. }  
    

---

作者：胖梅
来源：CSDN
原文：https://blog.csdn.net/xm1037782843/article/details/80708533
版权声明：本文为博主原创文章，转载请附上博文链接！