先捕獲,再冒泡
第三個(gè)參數(shù)為false 冒泡的時(shí)候執(zhí)行
第三個(gè)參數(shù)為true 捕獲的時(shí)候執(zhí)行
不傳則默認(rèn)為false
注意點(diǎn): 如果這個(gè)元素是被點(diǎn)擊的元素,那么捕獲不一定在冒泡之前,順序是由監(jiān)聽順序決定的。

dom事件模型
一直冒泡到body。。。
e.stopPropagation() : 阻止事件傳遞,不阻止默認(rèn)行為
說明: 如果捕獲階段stopPropagation,則后續(xù)捕獲冒泡都不會(huì)觸發(fā)。
e.preventDefault是事件對(duì)象Event的一個(gè)方法,作用是取消一個(gè)目標(biāo)元素的默認(rèn)行為如鏈接<a href="xxx">點(diǎn)我</a>,提交按鈕<input type=”submit”>等
e.preventDefault() : 阻止默認(rèn)行為,不阻止事件傳遞
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="grand">
爺爺
<div id="father">
爸爸
<div id="son">
兒子
</div>
</div>
</div>
</body>
</html>
/*
先捕獲,再冒泡
第三個(gè)參數(shù)為false 冒泡的時(shí)候執(zhí)行
第三個(gè)參數(shù)為true 捕獲的時(shí)候執(zhí)行
不傳則默認(rèn)為false
注意點(diǎn): 如果這個(gè)元素是被點(diǎn)擊的元素,那么捕獲不一定在冒泡之前,順序是由監(jiān)聽順序決定的。
*/
document.getElementById('son')
.addEventListener('click', function() {
console.log('son clicked');
}, false);
document.getElementById('son')
.addEventListener('click', function() {
console.log('son clicked 2');
}, true);
document.getElementById('father')
.addEventListener('click', function() {
console.log('father clicked');
}, true);
document.getElementById('grand')
.addEventListener('click', function() {
console.log('grand clicked');
}, false);
document.addEventListener('click', function() {
console.log('document clicked');
}, false);