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