W3C 事件处理函数

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

 window.addEventListener('load', init, false); //第一次执行了 
 window.addEventListener('load', init, false); //第二次被屏蔽了 
 function init() { 
 alert('Lee'); 
 } 

事件切换器

 window.addEventListener('load', function () { 
 var box = document.getElementById('box'); 
 box.addEventListener('click', function () { //不会被误删 
 alert('Lee'); 
 }, false); 
 box.addEventListener('click', toBlue, false); //引入切换也不会太多递归卡死 
 }, false); 
 function toRed() { 
 this.className = 'red'; 
 this.removeEventListener('click', toRed, false); 
 this.addEventListener('click', toBlue, false); 
 } 
 function toBlue() { 
 this.className = 'blue'; 
 this.removeEventListener('click', toBlue, false); 
 this.addEventListener('click', toRed, false); 
 } 

设置冒泡和捕获阶段

之前我们上一章了解了事件冒泡，即从里到外触发。我们也可以通过 event 对象来阻止某一阶段的冒泡。那么 W3C 现代事件绑定可以设置冒泡和捕获。

 document.addEventListener('click', function () { 
 alert('document'); 
 }, true); //把布尔值设置成 true，则为捕获 
 box.addEventListener('click', function () { 
 alert('Lee'); 
 }, true); //把布尔值设置成 false，则为冒泡