js事件监听器用法实例详解

下面是“js事件监听器用法实例详解”的攻略：

什么是事件监听器？

事件监听器（Event Listener）是一种常用的 JavaScript 技术，它用来监听特定元素（如 DOM 元素）上的特定事件（如单击、滚动、鼠标移动、键盘按键等），并在事件发生时触发执行指定的回调函数。这种技术可以实现 Web 页面上的交互效果，比如：按钮单击后弹出框、下拉菜单、图片轮播等等。

如何使用事件监听器？

使用事件监听器有两种方式：第一种方式是在元素上直接注册事件监听器，第二种方式是通过事件代理的方式在父元素上注册事件监听器。下面我们将分别介绍这两种使用方式。

直接注册事件监听器

直接注册事件监听器是指直接在目标元素上注册相应的事件监听器。下面是一个使用直接注册事件监听器的示例：

// 获取按钮元素
var btn = document.getElementById('myBtn');

// 注册 click 事件监听器
btn.addEventListener('click', function() {
  alert('Hello world!');
});

在上述示例中，我们首先获取到 id 为 myBtn 的按钮元素，然后通过 addEventListener 方法为该按钮注册了一个 click 事件监听器。当用户单击该按钮时，就会触发该事件监听器中的回调函数，弹出提示框显示 Hello world!。

事件代理注册事件监听器

事件代理是指将多个子元素上的事件监听器注册在它们的父元素上，然后通过事件冒泡机制触发匹配的回调函数。使用事件代理的好处是可以减少大量的重复代码，还可以实现动态添加和删除子元素时的事件监听器维护。下面是一个使用事件代理注册事件监听器的示例：

// 获取父元素
var parent = document.getElementById('myParent');

// 注册 click 事件代理监听器
parent.addEventListener('click', function(event) {
  // 判断目标元素
  if (event.target.tagName === 'LI') {
    // 目标元素为 li，执行回调函数
    alert('You clicked ' + event.target.textContent);
  }
});

在上述示例中，我们首先获取到 id 为 myParent 的父元素，然后通过 addEventListener 方法注册了一个 click 事件代理监听器。当用户单击父元素中的子元素时（比如单击其中的一个 <li> 元素），事件代理机制就会按照顺序冒泡到指定回调函数，从而触发该回调函数并执行其中的代码。

结论

通过上述两个示例，我们可以看到事件监听器是一个非常有用的技术，可以实现 Web 页面上的众多交互效果。同时，在实际开发中，我们可以根据具体的场景选择使用直接注册事件监听器或者事件代理注册事件监听器，以达到最优的代码效果和性能。