一捶牢、DOM事件級(jí)別
DOM0：element.onclick = function () {}
DOM2：window.addEventListener('click', function () {}, false) //false是冒泡，true是捕獲饺蔑，默認(rèn)是false
DOM3：window.addEventListener('keyup', function () {}, false)
二锌介、事件模型
三、事件流
第一階段是捕獲猾警，第二階段是目標(biāo)階段孔祸，第三階段是冒泡
四、捕獲的具體過程
window ==> document ==> html ==> body ==> 父節(jié)點(diǎn) ==> 目標(biāo)元素
冒泡就是反過來 從目標(biāo)元素到window
五发皿、event對(duì)象的常用方法
event.preventDefault
Event接口的**preventDefault()**方法崔慧，告訴user agent：如果此事件沒有被顯式處理，它默認(rèn)的動(dòng)作也不應(yīng)該照常執(zhí)行雳窟。此事件還是繼續(xù)傳播尊浪，除非碰到事件偵聽器調(diào)用stopPropagation()或stopImmediatePropagation()，才停止傳播封救。
阻止默認(rèn)行為
event.stopPropagation
Event接口的stopPropagation()方法阻止捕獲和冒泡階段中當(dāng)前事件的進(jìn)一步傳播拇涤。但是，它不能防止任何默認(rèn)行為的發(fā)生誉结；例如鹅士，對(duì)鏈接的點(diǎn)擊仍會(huì)被處理。如果要停止這些行為惩坑，請(qǐng)參見preventDefault()方法掉盅，它可以阻止事件觸發(fā)后默認(rèn)動(dòng)作的發(fā)生。它也不能阻止附加到相同元素的相同事件類型的其它事件處理器以舒，如果要阻止這些處理器的運(yùn)行趾痘，請(qǐng)參見stopImmediatePropagation()方法。
阻止事件冒泡
event.stopImmediatePropagation
Event接口的**stopImmediatePropagation()**方法阻止監(jiān)聽同一事件的其他事件監(jiān)聽器被調(diào)用蔓钟。
如果多個(gè)事件監(jiān)聽器被附加到相同元素的相同事件類型上永票，當(dāng)此事件觸發(fā)時(shí)，它們會(huì)按其被添加的順序被調(diào)用滥沫。如果在其中一個(gè)事件監(jiān)聽器中執(zhí)行stopImmediatePropagation()侣集，那么剩下的事件監(jiān)聽器都不會(huì)被調(diào)用。
阻止當(dāng)前元素上的其他事件的執(zhí)行兰绣，同時(shí)阻止冒泡
event.currentTarget
Event接口的只讀屬性**currentTarget**表示的世分，標(biāo)識(shí)是當(dāng)事件沿著 DOM 觸發(fā)時(shí)事件的當(dāng)前目標(biāo)。它總是指向事件綁定的元素缀辩，而Event.target則是事件觸發(fā)的元素臭埋。
指向事件綁定的元素踪央，不是事件觸發(fā)的元素
event.target
觸發(fā)事件的對(duì)象 (某個(gè)DOM元素) 的引用。當(dāng)事件處理程序在事件的冒泡或捕獲階段被調(diào)用時(shí)斋泄，它與
event.currentTarget不同杯瞻。
指向事件觸發(fā)的元素
六、自定義事件
- 使用Event創(chuàng)建
//創(chuàng)建自定義事件
let eve = new Event('custom')
//監(jiān)聽自定義事件
ev.addEventListener('custom', function () {
console.log('我是自定義事件')
})
//觸發(fā)自定義事件
ev.dispatchEvent(eve)
- 使用CustomEvent創(chuàng)建
第一個(gè)參數(shù)是事件類型炫掐；
第二個(gè)參數(shù)可以提供事件的配置信息對(duì)象分別是：
bubbles：一個(gè)布爾值,表明該事件是否會(huì)冒泡魁莉。
cancelable：一個(gè)布爾值,表明該事件是否可以被取消。
detail： 當(dāng)事件初始化時(shí)傳遞的數(shù)據(jù)募胃。
//創(chuàng)建自定義事件
let eve = new CustomEvent(’custom‘, {
detail: {
hazcheeseburger: true
}
})
//監(jiān)聽自定義事件
ev.addEventListener('custom', function (e) {
console.log('我是自定義參數(shù)', e.detail)
})
//觸發(fā)自定義事件
ev.dispatchEvent(eve)
