JavaScript DOM 常用事件最新总结！-猿码集

1. 事件与事件监听器介绍

在前端开发中，用户的交互体验非常重要。而事件就是用来实现用户交互的重要机制，通过事件监听器来响应用户的交互行为。事件可以是鼠标操作、键盘输入、窗口大小改变等，DOM中常用的事件有很多，本文将介绍其中一些常用事件，以及如何给DOM元素添加事件监听器。

1.1 什么是事件

如上所述，事件就是用户与浏览器的交互行为，例如：点击、双击、悬停、滚动、键盘输入等。浏览器会将用户的行为转化为事件，同时将事件传递到相关的DOM元素中，这些DOM元素就可以通过事件监听器来响应用户的操作。

1.2 事件监听器的作用

事件监听器是一种机制，可以捕获特定事件类型并且执行一段代码，通常被用来响应用户的交互行为。在给DOM元素添加事件监听器之后，当相应的事件发生时，浏览器将会执行代码，并且允许您处理事件以及执行其他操作。

1.3 给DOM元素添加事件监听器

为DOM元素添加事件监听器通常需要使用addEventListener()方法。该方法需要传递三个参数，第一个参数为事件类型，第二个参数为回调函数，第三个参数可以设置事件处理配置选项。


// 为id为btn的按钮添加click事件监听器
let btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  alert('您点击了按钮');
});

2. 常用DOM事件介绍

下面将介绍一些常用的DOM事件，包括鼠标事件、键盘事件、表单事件、窗口事件。

2.1 鼠标事件

鼠标事件包括：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave等。其中，click事件用于处理鼠标单击，dblclick事件用于处理鼠标双击。


// 给id为btn的按钮添加单击事件监听器
let btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  alert('您点击了按钮');
});
// 给id为box的元素添加鼠标进入事件监听器
let box = document.querySelector('#box');
box.addEventListener('mouseenter', function() {
  console.log('鼠标进入了box元素');
});

2.2 键盘事件

键盘事件包括：keydown、keyup、keypress等。使用键盘事件可以处理用户的键盘输入，比如当用户按下某个键时执行相关操作。


// 给文档添加键盘按下事件监听器
document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('你按下了回车键');
  }
});

2.3 表单事件

表单事件包括：submit、reset、input、change等。这些事件通常被用来处理表单的相关操作，如表单数据的提交，数据的输入与响应等。


// 给id为form的表单添加提交事件监听器
let form = document.querySelector('#form');
form.addEventListener('submit', function(event) {
  // 阻止表单提交的默认操作
  event.preventDefault();
  // 获取表单的数据
  let username = event.target.elements.username.value;
  let password = event.target.elements.password.value;
  console.log(`用户名：${username}，密码：${password}`);
});

2.4 窗口事件

窗口事件包括：resize、scroll等。使用这些事件可以处理窗口的相关操作，比如窗口大小的改变，页面的滚动等。


// 给窗口添加窗口大小改变事件监听器
window.addEventListener('resize', function() {
  console.log('窗口大小发生了改变');
});

3. 事件传播机制

浏览器中的事件通常采用事件传播机制，这是一种沿着DOM树传播事件的机制。事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

3.1 捕获阶段

在事件传播过程中，事件从文档根元素(document)一直向下传播(Propagate)至目标节点。这个一个捕获阶段，当事件的目标元素在捕获阶段被点击时，浏览器会按照DOM树的顺序去遍历，先由document到目标节点上，执行捕获阶段的监听器。事件的捕获阶段从document一直到事件的目标节点，如果没有捕获事件的监听器，则这个操作阶段会被跳过。

3.2 目标阶段

当事件传播到目标元素时，会进入目标阶段。此时，DOM元素上绑定的事件监听器会被触发执行。

3.3 冒泡阶段

当事件在目标节点上处理完后，会开始由下向上传播(bubble)至根节点(document)。在事件传播至根节点的过程中，如果某个节点上开发者定义了该事件的监听器，则会被调用并触发该事件。

可以使用event.stopPropagation()方法来停止事件传播，这样事件就不会再向上传播。


let parent = document.querySelector('#parent');
let child = document.querySelector('#child');
let grandchild = document.querySelector('#grandchild');
document.addEventListener('click', function() {
  console.log('document被点击了');
});
parent.addEventListener('click', function() {
  console.log('parent被点击了');
});
child.addEventListener('click', function() {
  console.log('child被点击了');
});
grandchild.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('grandchild被点击了');
});

在上面的代码中，我们为文档、父元素、子元素、孙元素添加了click事件监听器。当你点击grandchild的时候，事件传播会从document到grandchild，先执行捕获阶段的监听器，然后执行目标阶段的监听器，最后再执行冒泡阶段的监听器。由于我们在grandchild的监听器中调用了event.stopPropagation()方法，因此事件不会再向上传播，也就是父元素和文档上定义的click监听器不会被触发。

4. 事件代理及其优势

事件代理指的是利用事件冒泡原理，让父元素代理它所有的子元素，从而可以更加高效地管理事件。

4.1 绑定单个事件和代理事件的区别

在传统的事件绑定方式中，我们通常是给每个元素单独添加事件监听器。这种方式可能会导致代码冗余，尤其是在需要监听多个元素且每个元素的事件处理方式都相同的情况下。举个例子，假设我们需要实现一个数字输入组件，该组件中包括多个数字输入框，每个数字输入框都需要监听keyup事件，并且在输入完成后将数据提交到后台。如果我们采用传统的事件绑定方式，代码可能会像这样：


let input1 = document.querySelector('#input1');
let input2 = document.querySelector('#input2');
let input3 = document.querySelector('#input3');
input1.addEventListener('keyup', sendData);
input2.addEventListener('keyup', sendData);
input3.addEventListener('keyup', sendData);
function sendData() {
  // 将数据提交到后台 ...
}

这样写很明显存在两个问题：1.事件处理函数重复；2.需要手动添加多个事件监听器。我们可以使用事件代理来解决这些问题。

4.2 事件代理的优势

使用事件代理可以使用单个事件监听程序来管理多个元素。当我们使用事件代理时，只需要将事件监听器添加到父元素上，然后处理每个子元素的点击事件即可。这种方式可以大大简化代码，减少重复，提高效率。


let container = document.querySelector('#container');
container.addEventListener('keyup', function(event) {
  if (event.target && event.target.nodeName === 'INPUT') {
    // 将数据提交到后台 ...
  }
});

在上面的代码中，我们只需要给容器元素(container)添加事件监听器，然后在每个子元素(input)的keyup事件中检查是否为input元素，然后进行操作即可。这种方式适用于管理多个元素且每个元素的监听方式相同的情况。

5. 总结

本文详细介绍了DOM中常用的事件与事件监听器，以及事件冒泡机制和事件代理的优势。当你需要管理多个元素且每个元素的监听方式相同的时候，可以使用事件代理来简化代码。希望本文对于你理解DOM事件和事件监听器有所帮助。

JavaScript DOM 常用事件最新总结！