##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.onloadvar 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事件处理函数
- addEventListener()
- 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.可以设置冒泡和捕获。