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.能够设置冒泡和捕获。