起航学习网

“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，则为冒泡

文章出自：http://qh.itpxw.cn/peixun/web/202185219.html

文章标题：Web前端开发培训教程：W3C 事件处理函数

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉