事件的默認傳播機制
-> 捕獲階段: 從外向內(nèi)依次查找元素
-> 目標階段: 當(dāng)前事件源本身的操作
-> 冒泡階段: 從內(nèi)到外依次觸發(fā)相關(guān)行為(最常用的就是冒泡階段)
使用DOM 0級事件綁定給元素的某一個行為綁定的方法聊倔,都是在行為觸發(fā)后的冒泡階段把方法執(zhí)行的。
outer.onclick = function (e) {
console.log('outer');
console.log(e);
}
inner.onclick = function (e) {
console.log('inner');
console.log(e);
}
center.onclick = function (e) {
console.log('center');
console.log(e);
}
document.body.onclick = function (e) {
console.log('body');
console.log(e);
}
addEventListener
: 第一個參數(shù)是行為的類型, 第二個參數(shù)是給當(dāng)前的行為綁定的方法, 第三個參數(shù)是控制在哪個階段發(fā)生: true -> 在捕獲階段發(fā)生, false -> 在冒泡階段發(fā)生。
document.body.addEventListener('click', function (e) {
console.log('body');
console.log(e);;
}, false);
outer.addEventListener('click', function (e) {
console.log('body');
console.log(e);;
}, true);
inner.addEventListener('click', function (e) {
console.log('body');
console.log(e);;
}, false);