JS事件捕获与冒泡

先解释下事件捕获和冒泡:
捕获—事件从最上一级标签开始往下查找，直到捕获到事件目标(target)
冒泡—事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

在嵌套很多层的情况下, 如下:

html
<div class="div1" onclick="outer();">
    <div class="div2" onclick="middle();">
        <div class="div3" onclick="inner();"></div>
    </div>
</div>

css
.div1{width:300px;height:300px;border:1px solid red;}
.div2{width:200px;height:200px;border:1px solid green;}
.div3{width:100px;height:100px;border:1px solid blue;}

js
function html(){alert("html");} //加在html的onclick方法
function body1(){alert("body");}//加在body的onclick方法
function outer(){alert("outer");}
function middle(){alert("middle");}
function inner(){alert("inner");}
window.addEventListener("click", function(){alert("window");}) //加在window的onclick方法

当点击最深层的div3后,弹框顺序:
inner->middle->outer->body->html->window
网上有人说到body之后直接跳到window,但测试之后发现还是要到html,而window作为顶层对象,自然压轴登场(冒泡顺序和浏览器有关).所以由此看出, 事件冒泡机制是从里向外. 自然, 阻止冒泡也是有办法的, 如下:
当把function inner写成如下时,

function inner(e){
    alert("inner");
    e=e?e:event; //兼容低版本火狐
    // 阻止冒泡
    if(e.stopPropagation){ //webkit内核
        e.stopPropagation();
    }else{
        e.cancelBubble=true; //兼容IE9(含)以下
    }
}

再点击div inner, 弹框顺序是: inner;
是的, 只有一个弹框, 因为onclick事件默认是冒泡的顺序, 所以阻止冒泡后, 附加在目标(target)父级的点击方法全都不执行.
再进行测试, 如果采用捕获机制(这只在DOM3级事件才有—addEventListener), 所以我们对window绑定的点击事件进行改进, 不过在此之前, 我们先对addEventListener有更进一步的了解:

target.addEventListener(eventType, callback, isnotBubble);
/***
 *
 * eventType:  事件类型 string 必填
 * callback: 事件执行后的回调 function 必填
 * isnotBubble: 不冒泡 boolean 非必填
 * value of isnotBubble: false(默认值)---冒泡(从里向外);true---捕获(从外向里)
 *
***/

现在对window进行改进, 如下:

window.addEventListener("click", function(){alert("window");}, true); //事件捕获阶段

执行div inner的点击事件, 弹框顺序为: window->inner;
再执行div outer的点击事件, 弹框顺序为: window->outer->body->html.
大多数情况下, 很少会用到事件捕获阶段…

如果把div标签换成button, 会发生什么情况呢, 如下:

html
<button class="btn1" onclick="btnOuter();">
    <button class="bnt2" onclick="btnMiddle();">
        <a class="btn3" href="javascript:void(0);" onclick="btnInner();">链接</a>
    </button>
</button>

css
.btn1, .btn2, .btn3{display:block;}
.btn1{width:100px;border:1px solid red;}
.btn1{width:70px;border:1px solid green;}
.btn1{width:40px;border:1px solid blue;}

js
function btnOuter(){alert("btnOuter");}
function btnMiddle(){alert("btnMiddle");}
function btnInner(){alert("btnInner");}

而布局完全不是预想中的样子:

// 浏览器渲染后的布局
<button class="btn1" onclick="btnOuter();"></button>
<button class="bnt2" onclick="btnMiddle();">
        <a class="btn3" href="javascript:void(0);" onclick="btnInner();">链接</a>
</button>

如果有人不信的话, 可以自己去试试
而对于a.href=url 或 button.type=submit 或 input.type=submit 等类似的标签, 都会在点击后执行自己标签的默认事件, 比如a标签会跳页面, button会提交表单, 但是在某些时候我们并不希望标签执行自己的默认事件, 所以再进行改进:
function btnInside改进如下

html
<button class="btn1" onclick="btnOuter();">
    <button class="bnt2" onclick="btnMiddle();">
        <a class="btn3" href="http://www.baidu.com" onclick="btnInner(event);">链接</a>
    </button>
</button>

js
function btnInner(e){
        e.preventDefault() || (window.event.returnValue=false); //兼容IE
        alert("btnInner");
    }

此时点击a btn3, 不会跳页面.

最后再加一句: IE9(不含)以下竟然不支持addEventListener方法