js事件介绍——冒泡&捕获%代理

1.事件冒泡&捕获

• 事件捕获：从最外层的元素对象开始触发，最后执行最内层的元素对象
• 事件冒泡：事件从最内层的元素对象开始触发，最后执行最外层的元素对象

• 捕获和冒泡过程图

  
  
  image.png

案例：

    

        welcome
        
hello
        
word
    


    

分别在obj1,obj2上绑定了一个点击事件，由于addEventListener的第三个参数为默认为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现：

1. 点击文字welcome时，弹出hello
   此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome 属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，body，没有绑定点击事件，再到html,document,都没再有绑定的点击事件，整个冒泡过程结束。

2. 点击文字hello时，先弹出world，再弹出hello

   
   
   image.png

3. 点击world时，弹出hello
   具体冒泡过程和第二种情况类似，如下图

   
   
   image.png

2.事件委托（代理）

事件委托是利用事件的冒泡原理来实现的

案例1：利用事件委托实现点击li，弹出123

    
111
    
222
    
333
    
444


  

给父元素对象设置点击事件，让事件代理的效果跟直接事件对象节点的事件效果一样，比如给ul设置点击事件，但只有点击li才会触发，需要用到Event对象，Event对象提供了一个属性叫target，可以返回事件的目标节点，target就可以表示为当前的事件操作的dom；标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

给父标签设置点击事件，使用事件委托减少dom操作

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　     alert(target.innerHTML);
　　　　}
　　}
}