JavaScript的事件冒泡和事件捕获

当用户单击某个按钮的时候，浏览器认为单击事件不仅仅发生在按钮上。换句话说，在单击按钮的同时，也单击了按钮的容器元素，甚至单击了整个页面。

DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件冒泡阶段。

1. 事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
2. 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
3. 事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。

 

事件冒泡：

即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。简单的说就是事件从事件目标(target)开始，往上冒泡直到页面的document对象。

   window.onload=function (){
        var odiv1=document.getElementById("div1");
        var odiv2=document.getElementById("div2");
        var odiv3=document.getElementById("div3");

        function fdiv1(){
            alert("div1");
        }
        function fdiv2(){
            alert("div2");
        }
        function fdiv3(ev){
            var en=ev || event;
            en.cancelBubble=true;
            alert("div3");
        }
        odiv1.onclick=fdiv1;
        odiv2.onclick=fdiv2;
        odiv3.onclick=fdiv3;
    }

js中阻止事件冒泡

  function fdiv3(e){
            var e1=e || event;
            e1.cancelBubble=true;
            alert("div3");
        }
//点击div3的时候只用启动div3的事件.

 

事件捕获

事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

 window.onload=function (){
            var odiv1=document.getElementById("div1");
            var odiv2=document.getElementById("div2");
            var odiv3=document.getElementById("div3");
     
            odiv1.addEventListener("click",function(){
                alert("div1");
            },true);
            odiv2.addEventListener("click",function(){
                alert("div2");
            },true);
            odiv3.addEventListener("click",function(){
                alert("div3");
            },true);

true的用处是指定事件在事件捕获阶段执行。

element.addEventListener(event, function, useCapture)

event：必须。字符串，指定事件名。

function：必须。指定要事件触发时执行的函数。

useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。