js傳統事件和DOM事件的區別

##1. 傳統事件綁定的問題

1.覆蓋問題

window.onload = function () { //第一組程序項目或第一個JS 文件
alert('Lee');
};
window.onload = function () { //第二組程序項目或第二個JS 文件
alert('Mr.Lee');
};

當兩組程序或兩個JS 文件同時執行的時候，後面一個會把前面一個徹底覆蓋掉。致使
前面的window.onload 徹底失效了。

###覆蓋的問題的解決辦法(建立保存器）

window.onload = function () { //第一個要執行的事件，會被覆蓋
alert('Lee');
};
if (typeof window.onload == 'function') { //判斷以前是否有window.onload
var saved = null; //建立一個保存器
saved = window.onload; //把以前的window.onload 保存起來
}
window.onload = function () { //最終一個要執行事件
if (saved) saved(); //執行以前一個事件
alert('Mr.Lee'); //執行本事件的代碼
};

##2.事件切換問題

問題二：事件切換器

box.onclick = toBlue; //第一次執行boBlue()
function toRed() {
this.className = 'red';
this.onclick = toBlue; //第三次執行toBlue()，而後來回切換
}
function toBlue() {
this.className = 'blue';
this.onclick = toRed; //第二次執行toRed()
}

這個切換器在擴展的時候，會出現一些問題：
1.若是增長一個執行函數，那麼會被覆蓋
box.onclick = toAlert; //被增長的函數
box.onclick = toBlue; //toAlert 被覆蓋了
2.若是解決覆蓋問題，就必須包含同時執行，但又出新問題
box.onclick = function () { //包含進去，但可讀性下降
toAlert(); //第一次不會被覆蓋，但第二次又被覆蓋
toBlue.call(this); //還必須把this 傳遞到切換器裏
};

##2.W3C事件處理函數

1. addEventListener()
2. removeEventListener()

「DOM2 級事件」定義了兩個方法，用於添加事件和刪除事件處理程序的操做： addEventListener()和removeEventListener()。全部DOM 節點中都包含這兩個方法，而且它 們都接受3 個參數；事件名、函數、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)。

window.addEventListener('load', function () {
alert('Lee');
}, false);
window.addEventListener('load', function () {
alert('Mr.Lee');
}, false);

PS：W3C 的現代事件綁定比咱們自定義的好處就是：1.不須要自定義了；2.能夠屏蔽相 同的函數；3.能夠設置冒泡和捕獲。