js传统事件和DOM事件的区别

2019独角兽企业重金招聘Python工程师标准>>>

##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.可以设置冒泡和捕获。

转载于:https://my.oschina.net/2016jyh/blog/787285