使用D0M2事件綁定其實(shí)是讓box通過原型鏈一直找到EventTarget這個(gè)內(nèi)置類原型上的addEventListener方法實(shí)現(xiàn)的。
DOM0級事件綁定: 只能給一個(gè)元素的某一個(gè)行為綁定一次方法，第二次綁定的會把前面的覆蓋掉。
box.onclick = function () {
console.log(1); // 不輸出
}
box.onclick = function () {
console.log(2); // 輸出
}
DOM2: 可以給某一個(gè)元素的同一個(gè)行為綁定不同的方法衬横。
box.addEventListener('click', function () {
console.log(1); // 輸出
}, false);
box.addEventListener('click', function () {
console.log(2); // 輸出
}, false);
DOM2: DOM0中的行為類型拇泣，用DOM2一樣可以綁定债朵；而且DOM2中還提供了一些DOM0沒有的事件類型 -> DOMContentLoaded: 當(dāng)頁面中的DOM結(jié)構(gòu)或者HTML結(jié)構(gòu)加載完成觸發(fā)的行為谚中。
document.addEventListener('DOMContentLoaded', function () {
}, false);
window.onload = function() { ... }-> 當(dāng)頁面中的所有資源都加載完成(圖片、HTML結(jié)構(gòu)、音視頻...)才會執(zhí)行后面的函數(shù)盗冷；并且在一個(gè)頁面中只能用一次，后面再寫會把前面的覆蓋掉诬垂。因?yàn)樗遣捎肈OM0事件綁定，所以只能綁定一次娜谊。
jQuery: $(document).ready(function() {...}); -> $(function() {...});只要當(dāng)頁面中的HTML結(jié)構(gòu)加載完成就會執(zhí)行對應(yīng)的函數(shù)近迁；并且在同一個(gè)頁面中可以出現(xiàn)多次瑰步。使用的是DOM2事件綁定璧眠，并且綁定的行為是DOM2中新增加的那個(gè)DOMContentLoaded灾螃。
window.addEventListener('load', function () { }, false);
window.addEventListener('load', function () { }, false);
DOM2事件移除
移除的時(shí)候要保證三個(gè)參數(shù): 行為藐握、方法初家、哪個(gè)階段發(fā)生，一個(gè)都不能差。在使用DOM2綁定的時(shí)候，一般給它綁定的是實(shí)名函數(shù)虹钮。
function fn1(e) {
console.log(this);
}
box.addEventListener('click', fn1, false);
box.removeEventListener('click', fn1, false);
只能給某個(gè)元素的同一個(gè)行為綁定多個(gè)"不同"的方法膘融，如果方法相同了芙粱，只能留一個(gè)。當(dāng)行為觸發(fā)氧映，會按照綁定的先后順序依次把綁定的方法執(zhí)行春畔。執(zhí)行的方法中的this是當(dāng)前被綁定事件元素本身。
function fn1() { console.log(1); }
function fn2() { console.log(2); }
function fn3() { console.log(3); }
function fn4() { console.log(4); }
function fn5() { console.log(5); }
function fn6() { console.log(6); }
function fn7() { console.log(7); }
box.addEventListener('click', fn1, false);
box.addEventListener('click', fn2, false);
box.addEventListener('click', fn3, false);
在IE6-8瀏覽器下岛都，不支持addEventListener/ removeEventListener,如果想要實(shí)現(xiàn)DOM2事件綁定律姨，只能使用attachEvent/detachEvent。它只有兩個(gè)參數(shù)臼疫，不能像addEventListener那樣控制在哪個(gè)階段發(fā)生择份，默認(rèn)只能在冒泡階段發(fā)生。行為需要添加 "on",和DOM0特別類似烫堤。
box.attachEvent('onclick', fn1);
box.attachEvent('onclick', fn2);
box.attachEvent('onclick', fn3);
和標(biāo)準(zhǔn)瀏覽器的事件池機(jī)制對比:
- 順序問題: 執(zhí)行時(shí)順序是混亂的荣赶，標(biāo)準(zhǔn)瀏覽器是按照綁定順序依次執(zhí)行的。
- 重復(fù)問題: IE6-8中可以給同一個(gè)元素的同一個(gè)行為綁定多個(gè)相同的方法鸽斟。
- this問題: IE6-8中當(dāng)方法執(zhí)行的時(shí)候拔创，方法中的this不是當(dāng)前的元素box，而是window富蓄。
