JavaScript常见事件处理程序实例总结

2023年5月28日上午12:58 • JavaScript

下面是“JavaScript常见事件处理程序实例总结”的完整攻略：

简介

在Web开发中，事件处理程序是常用的技术，其在页面交互、动态特效、表单验证等方面都有广泛应用。JavaScript作为一门客户端语言，提供了丰富的事件处理程序实现方式，比如DOM0级事件处理程序、DOM2级事件处理程序、事件委托、自定义事件等技术。

本文将详细介绍JavaScript常见的事件处理程序实现方式和应用案例，让读者掌握 JavaScript处理事件的方法和技巧，提高开发效率。

DOM0级事件处理程序

DOM0级事件处理程序是最早的一种事件处理实现方式，主要通过为DOM元素的属性赋值来实现事件绑定。其基本语法为：

document.getElementById("idName").onclick = function() {
  // 事件处理函数
}

其中，idName代表需要绑定事件的DOM元素的ID，onclick是需要绑定的事件类型，后面的匿名函数是事件处理函数。

使用DOM0级事件处理程序存在一些缺点，比如只能绑定一种事件类型，存在被覆盖的风险，只支持冒泡阶段等。因此，推荐使用DOM2级事件处理程序。

DOM2级事件处理程序

DOM2级事件处理程序是目前主流的事件处理实现方式，它提供了更加灵活的方式来绑定事件、取消事件绑定、事件冒泡/捕获等功能。

绑定事件

绑定事件可以通过调用addEventListener方法实现，具体语法如下：

document.getElementById("idName").addEventListener("click", function() {
  // 事件处理函数
}, false);

其中，idName表示需要绑定事件的DOM元素的ID；click代表需要绑定的事件类型；后面的匿名函数表示事件处理函数；false表示冒泡阶段执行事件处理程序（默认值为false，即冒泡阶段执行事件处理程序）。

取消事件

取消事件绑定可以通过调用removeEventListener方法实现，具体语法如下：

document.getElementById("idName").removeEventListener("click", function() {
  // 事件处理函数
}, false);

其中，idName表示需要取消事件绑定的DOM元素的ID；click代表需要取消的事件类型；后面的匿名函数表示需要取消的事件处理函数；false表示事件注册在冒泡阶段（取消事件绑定需要和事件绑定时的参数对应）。

事件传递

DOM2级事件处理程序支持事件捕获和事件冒泡，将在实例中详细介绍。

事件委托

事件委托是一种常见的事件处理技术，主要应用在元素较多、动态添加元素、元素绑定的事件相同的情况下，能够避免频繁地添加、移除事件处理程序，从而提高程序性能。

实现原理

事件委托的实现原理是通过将事件绑定到容器元素上，然后通过事件对象来获取被点击的元素节点进而进行相应处理。

代码示例

下面通过一个实例来演示事件委托的使用：

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

const list = document.getElementById('list');

// 使用事件委托绑定事件
list.addEventListener('click', function(event) {
  const target = event.target;
  if(target.nodeName === 'LI') {
    console.log(target.innerHTML);
  }
});

上面的代码通过事件委托绑定了一个click事件处理函数到ul元素上，在实际点击事件中，只需要判断点击的目标元素是否为li元素，是则进行相应的处理。

自定义事件

自定义事件是指在程序中额外定义的、与浏览器自带事件相对应的事件类型，能够更好地满足开发需求。

实现步骤

自定义事件的实现主要包括以下步骤：

创建事件对象：使用createEvent方法创建事件对象；
自定义事件类型：使用initCustomEvent方法定义自定义事件类型；
触发事件：使用dispatchEvent方法触发自定义事件。

代码示例

下面通过一个简单的列子来演示自定义事件：

const event = document.createEvent('Event');

// 定义自定义事件类型
event.initEvent('myEvent', true, true);

// 绑定事件
document.addEventListener('myEvent', function(event) {
  console.log('自定义事件触发');
});

// 触发事件
document.dispatchEvent(event);

上面的代码中，首先使用createEvent方法创建了一个事件对象，然后使用initCustomEvent方法定义了一个名为myEvent的自定义事件类型，接着绑定触发自定义事件的监听函数，并通过dispatchEvent方法触发自定义事件。当自定义事件被触发时，绑定的监听函数将被执行。