事件傳遞機(jī)制：
例如鼠標(biāo)被按下后，mousedown事件被觸發(fā)。
事件先從document->ancestor element->...->parent->event.target(在此元素上按下的鼠標(biāo))->parent->...->ancestor element->document.
事件走了一個(gè)循環(huán)，從documet到event.target再回到document，從event.target到document的過(guò)程叫做冒泡。
event.stopPropagation(); // 事件停止冒泡到，即不讓事件再向上傳遞到document，但是此事件的默認(rèn)行為仍然被執(zhí)行，如點(diǎn)擊一個(gè)鏈接，調(diào)用了event.stopPropagation()，鏈接仍然會(huì)被打開(kāi)。
event.preventDefault(); // 取消了事件的默認(rèn)行為，如點(diǎn)擊一個(gè)鏈接，鏈接不會(huì)被打開(kāi)，但是此事件仍然會(huì)傳遞給更上一層的先輩元素。
在事件處理函數(shù)中使用 return false; 相當(dāng)于同時(shí)調(diào)用了event.stopPropagation()和event.preventDefault()，事件的默認(rèn)行為不會(huì)被執(zhí)行，事件也不會(huì)冒泡向上傳遞。
新的添加事件機(jī)制使用el.addEventListener('click', function(event){}, false);
第三個(gè)參數(shù)是true或者false，一般都是使用false. 這個(gè)bool變量指示事件是使用capture還是bubble方式來(lái)處理。true表示使用捕捉方式，false使用冒泡方式，大多數(shù)情況下也是使用冒泡方式。
<div>
<a >Navigate to Apple</a>
</div>
如上兩個(gè)元素div和a，a是div的孩子元素，他們都使用了addEventListener注冊(cè)了click事件。
<body>
<div id="myDiv">
<a id="apple">Go to Apple</a>
</div>
</body>
document.getElementById("myDiv").addEventListener("click", function(event) {
console.log("click on div");
}, false);
document.getElementById("apple").addEventListener("click", function(event) {
event.preventDefault();
console.log("click on a");
}, false);
如果在myDiv上的第三個(gè)參數(shù)使用false, 則點(diǎn)擊鏈接后鏈接的click事件函數(shù)先執(zhí)行，再執(zhí)行myDiv的click事件處理函數(shù)。而如果使用的是true，則使用捕捉方式，所以myDiv的click事件處理函數(shù)先執(zhí)行。