网站导航
> 技术文档 > JavaScript 系列之：事件_document.addeventlistener

JavaScript 系列之：事件_document.addeventlistener

网友: 技术文档 2025-07-30 19:30:23

传播机制 - 事件流

在 DOM 中触发事件（如点击或鼠标移动）时，事件会经过一个或多个元素，形成所谓的“事件流”。DOM 事件流包含三个阶段：捕获阶段、目标阶段和冒泡阶段。

  • 捕获阶段：

    • 事件从 document 开始，沿着 DOM 树向下传播，直到触发事件的目标元素。

    • 只有为捕获阶段注册的事件监听器会被触发。

  • 目标阶段：

    • 事件到达目标元素时，目标元素上的事件监听器会被触发。

  • 冒泡阶段：

    • 事件从目标元素开始，向上沿着 DOM 树传播，直到 document。

    • 只有为冒泡阶段注册的事件监听器会被触发。

注意事项：

  • 使用 addEventListener 注册事件时，第三个参数决定监听器是在捕获阶段还是冒泡阶段触发

    • 默认情况下（第三个参数未设置或为 false），事件监听器在冒泡阶段触发。

    • 如果指定第三个参数为 true，则在捕获阶段触发。

  • 一种类型的事件不会触发不同类型的事件处理器。例如，click 事件不会触发 keydown 事件的处理器。

事件委托

在实际开发中，捕获阶段的应用相对较少，而冒泡阶段的应用则更为广泛。

开发者常利用冒泡阶段来监听多个元素的共同事件，从而减少代码的重复性。

一个典型的应用是事件委托，即将事件监听器绑定到父元素上，从而实现对动态添加子元素的事件监听。

这不仅减少了代码量，还能提高页面性能，降低内存消耗。

事件对象 - event

当事件被触发时，浏览器会创建一个事件对象，并将其作为参数传递给事件处理函数。

这个事件对象包含了与事件相关的所有信息：如事件的类型、触发事件的目标元素、鼠标的位置等。

通过事件对象，我们可以获取这些信息，并在事件处理函数中使用它们。

event 常用属性和方法：

属性/方法 描述 type 返回事件的名称，如 click、keydown 等。 target 返回实际触发事件的元素。 currentTarget 返回当前正在处理事件的元素。 timeStamp 返回事件创建的日期和时间（以毫秒为单位）。 preventDefault() 调用此方法可以阻止事件的默认行为。例如，阻止表单的提交或阻止链接的导航。 stopPropagation() 调用此方法可以阻止事件进一步冒泡到 DOM 树中的上层元素。

target 和 currentTarget 的区别：

  • target：

    • target 是指实际触发事件的元素。即使事件通过事件冒泡（或捕获）传播，target 始终是事件最初发生的元素。

    • 比如，如果你点击了一个按钮，而这个按钮被包含在一个 div 元素中，target 就是被点击的按钮，而不是包含它的 div。

  • currentTarget：

    • currentTarget 指的是当前正在处理事件的元素，通常是事件处理器绑定的元素。

    • 如果你给父元素绑定了事件监听器，currentTarget 就是绑定事件的父元素，而不是实际触发事件的子元素。

事件监听器 - addEventListener

事件监听器 是一个函数，当指定事件发生在指定元素上时，该函数会被调用。可以通过 addEventListener() 方法为元素添加事件监听器。

语法：

addEventListener(type, listener, useCapture);

  • type：事件类型

  • listener：回调函数

  • useCapture：一个布尔值，定义事件是在冒泡阶段（默认）还是捕获阶段（true）触发

 const element = document.getElementById(\'test\'); element.addEventListener(\'click\', function(event) { console.log(event) }); child.addEventListener(\'click\', function(event) { console.log(\'target:\', event.target); // 会输出触发事件的元素 console.log(\'currentTarget:\', event.currentTarget); // 会输出绑定事件监听器的元素 });

鼠标事件

事件 描述 click 当用户点击某个对象时触发 dblclick 当用户双击某个对象时触发 mousedown 当鼠标按钮被按下时触发 mouseup 当鼠标按键被松开时触发 mouseenter 当鼠标指针移动到元素上时触发 mouseleave 当鼠标指针移出元素时触发 mouseover 当鼠标移到某元素之上时触发 mouseout 当鼠标从某元素移开时触发 mousemove 当鼠标在元素内部移动时触发 contextmenu 当用户点击鼠标右键打开上下文菜单时触发

mouseenter 和 mouseover 区别：

  • mouseenter “进入即触发，不冒泡”

    • 仅在鼠标首次进入元素时触发，不考虑鼠标在元素内的移动或进入子元素的情况。

    • 不支持事件冒泡，即当鼠标从子元素移动到父元素时，不会触发父元素的 mouseenter 事件。

  • mouseover “进入和移动都触发，且冒泡”

    • 在鼠标进入元素时触发，且当鼠标在元素内移动或进入其子元素时也会触发。

    • 支持事件冒泡，鼠标在元素及其子元素上的移动都会触发相应的事件，且事件会冒泡到父元素。

键盘事件

事件 描述 keydown 当某个键盘按键被按下时触发。 keyup 当某个键盘按键被松开时触发。 keypress 当某个键盘按键被按下并松开时触发（注意：在某些浏览器中，对于某些特殊键 keypress 事件可能不会触发，如修饰键）。

举例：

// 获取输入框元素const inputElement = document.getElementById(\'myInput\'); // 定义当按下回车时执行的函数function handleEnterPress(event) { if (event.keyCode === 13) { // 在这里编写你要执行的代码 console.log(\'回车键被按下了！\'); }} // 为输入框添加键盘事件监听器inputElement.addEventListener(\'keydown\', handleEnterPress);

表单事件

事件 描述 submit 当表单提交时触发 change 当表单元素的内容改变时触发（如 ,