你知道浏览器事件机制中触发事件的三个阶段是什么吗? 这是经常被问及的问题,现在咱们就来看看.

    
             parent        
     
      child            
      
       提交
      
        
     
    
    
复制代码

var divs=document.querySelectorAll("div");//获取所有的divs    function fn0(){        alert("box");    }    function fn1(){        alert("child");    }    function fn2(){        alert("but");    }    divs[0].addEventListener("click",fn0,false);    divs[1].addEventListener("click",fn1,false);    divs[2].addEventListener("click",fn2,false);复制代码

浏览器机制中触发事件的三个阶段:

• 事件捕获
• 事件目标处理函数
• 事件冒泡

描述:

• 当达到某个条件触发了某个元素绑定的事件的时候,就会从document顶级元素发送一个事件流,顺着dom树一层一层向下查找,直到找到了目标元素,这个层层查找的过程称为事件的捕获,在这个阶段不会触发绑定的事件.
• 达到目标元素,这个阶段称为"事件目标处理函数",触发这个元素绑定的事件
• 然后就从目标元素开始一层层往顶层元素传递,在这个过程中如果发现元素绑定了此类型的事件,就会触发,这就是事件冒泡.

其中addEventListener第三个参数默认为false,代表冒泡阶段执行,如果改为true,就代表在捕获阶段执行. 如果想要阻止冒泡行为,可以用e.stopPropagation() 或 e.cancelBubble = true（IE）