DOM2事件綁定的原理
1.DOM2事件綁定使用的addEventListener/attachEvent都是在EventTarget這個內置類的原型上定義的,咱們使用的時候,會經過原型鏈找個這個方法,而後執行綁定的事件。
2.瀏覽器會給當前元素的某一個事件行爲開闢一個事件池(事件隊列),準確來講,瀏覽器有一個統一的事件池,咱們給每一個元素綁定的某個方法都會放在這個事件池中,而後經過相關的標識來進行區分。當咱們經過addEventListener/attachEvent作事件監聽的時候,會把綁定的方法存放在事件池中。
3.當元素的某一個行爲被觸發,瀏覽器會把當前存放在事件池中的全部方法,依次按照存放的前後順序執行。瀏覽器
DOM2特色
code
//DOM0下沒有這個屬性: document.body.DOMContentLoaded === undefined //DOM2標準瀏覽器下: document.body.addEventListener('DOMContentLoaded',function(){ //標準瀏覽器中兼容這個事件,當瀏覽器中的DOM結構加載完成,就會觸發這個事件(也會把綁定的方法執行) },false) //DOM2下IE6~8下也不支持這個事件 document.body.attachEvent('onDOMContentLoaded',function(){ })
2.DOM2中能夠給當前元素的某一個事件行爲綁定多個不一樣的方法(由於綁定的全部方法都存放在事件池中)對象
function fn1(){ console.log('1'); } function fn2(){ console.log('2'); } function fn3(){ console.log('3'); } document.body.addEventListener('click', fn1, false); document.body.addEventListener('click', fn3, false); document.body.addEventListener('click', fn2, false); //fn2事件移除。移除的時候要求 事件類型、綁定的方法、傳播階段三個徹底一致才能夠移除掉 document.body.removeEventListener('click', fn2, false)
DOM0和DOM2執行順序的問題
隊列
function fn(){ console.log(1); } document.addEventListerner('click', fn, false); document.addEventListerner('click', fn, false);//第二次存儲不到事件池中,由於事件池中已經存在fn。 到這裏只會輸出 1 document.onclick = fn;//會輸出 1 1 document.onclick = function() { console.log(2); } document.addEventListerner('click', function(){ console.log(3); }, false); //輸出結果 1 2 3 // 1. DOM0和DOM2綁定的方法是毫無關係的(由於他們是兩套不一樣的處理機制),即便綁定的方法相同,也是執行2次 //2. 誰先綁定,就先執行誰。
DOM0:瀏覽器會把一些經常使用的事件掛載到元素對象的私有屬性上。讓咱們能夠實現DOM0事件綁定
DOM2:凡是瀏覽器給元素天生設置的事件在DOM2中均可以用事件