深入理解document.addeventlistener

一、addEventListener()方法概述

addEventListener()方法是DOM中的一个非常重要的功能，它可以为指定的元素添加多个事件处理函数。在实际的开发中，我们常常需要在某些特定的条件下触发一些事件，这个时候addEventListener()就派上用场了。一般来说，它可以添加的事件类型有：鼠标事件、键盘事件、表单事件、窗口事件等。

通常来说，addEventListener()方法需要传递三个参数：事件类型、事件处理函数、(可选)事件捕获/冒泡。事件类型常见的有click、mouseover、change、load等等。事件处理函数就是当事件触发时需要执行的函数。事件捕获/冒泡就是指定事件是在捕获阶段还是冒泡阶段处理。

//示例代码
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  console.log('按钮被点击了');
});

二、addEventListener()与onclick的区别

在这里需要注意的是，addEventListener()和onclick的差异。简单来说，addEventListener()可以添加多个事件函数，而onclick只能添加一个。因此，addEventListener比onclick更为灵活方便。举个例子，如果我们现在要实现这样一个功能：点击按钮之后既要弹出提示框，又需要改变样式，那么我们需要同时添加两个事件处理函数，这个时候onclick就无法满足要求了，而addEventListener()就可以轻松实现该功能：

//示例代码
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按钮被点击了');
});
btn.addEventListener('click', function() {
  btn.style.backgroundColor = 'red';
});

三、addEventListener()与removeEventListener()

除了添加事件处理函数，addEventListener还有一个很重要的功能就是可以移除添加的事件处理函数。这是非常有用的特性，因为有时候我们需要在某些条件下暂时关闭某个事件的处理，或者在不需要的时候清除对应的事件处理函数。这时候就需要使用removeEventListener()方法来移除对应的事件处理函数。

//示例代码
let btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按钮被点击了');
});
let remove = function() {
  btn.removeEventListener('click', remove);
};
btn.addEventListener('click', remove);

四、addEventListener()与事件委托

如果我们在页面中添加大量的元素，那么添加事件处理函数就会变得非常麻烦。如果针对每个元素都写一个事件处理函数，那么这个页面的代码量可能会成倍增加。这个时候，就需要使用事件委托来解决这个问题了。委托就是把某一个元素的事件委托给祖先元素来处理。

使用addEventListener()可以很方便的实现事件委托，只需要在祖先元素上添加事件处理函数，当某个子元素触发事件时，事件处理函数会自动执行。

//示例代码
let itemParent = document.getElementById('item-parent');
itemParent.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    console.log('当前点击的元素为：', event.target);
  }
});

五、addEventListener()的注意事项

在使用addEventListener()方法的过程中，需要注意以下几点：

1.使用addEventListener()方法添加的事件处理函数是按照添加顺序进行执行的，如果有多个事件处理函数，那么执行顺序也是按照添加的顺序依次执行的；

2.在同一个元素上，重复添加相同类型的事件处理函数时，后添加的会覆盖之前添加的事件处理函数；

3.如果用removeEventListener()来移除事件处理函数，需要传入与添加事件时相同的事件处理函数才可以正常移除；

4.在使用事件委托的过程中，需要保证事件委托元素具有事件类型，否则无法触发事件；

5.在使用addEventListener()添加事件处理函数时，如果事件处理函数有形参，可以通过传递形参来向事件处理函数传递参数。

//示例代码
let btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
  console.log('按钮被点击了', event.target);
});

以上就是关于addEventListener()方法的详细阐述，相信通过本文的介绍，大家已经对它的使用方法有了更加深入的理解。在平时的开发工作中，要充分发挥好addEventListener()方法的作用，才能让我们的开发更加高效便捷。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/311146.html