Web前端开发|W3C事件处理函数_惠州前端培训学校

接下来跟着惠州北大青鸟老师一起来学习一下Web前端开发|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，则为冒泡

想了解更多关于前端的资讯，可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟