当前位置：首页 > news >正文

JavaScript 系列之：事件

news 来源：原创 2025/5/18 22:16:42

传播机制 - 事件流

在 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	当表单元素的内容改变时触发（如 `<input>, <textarea>, <select>` 等）
blur	当元素失去焦点时触发
focus	当元素获取焦点时触发
focusin	当元素即将获取焦点时触发
focusout	当元素即将失去焦点时触发
input	当元素获取用户输入时触发（如实时输入时）
reset	当表单重置时触发

举例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <title>表单事件示例</title>  
    </head>
    
    <body>  
        <form id="myForm">  
            <label for="username">用户名:</label>  
            <input type="text" id="username" name="username" required>  
            <br>  
            <label for="password">密码:</label>  
            <input type="password" id="password" name="password" required>  
            <br>  
            <input type="submit" value="提交">  
        </form>  

        <script src="script.js"></script>  
    </body>  
</html>

document.addEventListener('DOMContentLoaded', function() {  
    // 获取表单元素  
    var form = document.getElementById('myForm');  
  
    // 为表单添加 submit 事件监听器  
    form.addEventListener('submit', function(event) {  
        // 阻止表单的默认提交行为，以便我们可以执行自定义操作  
        event.preventDefault();  
  
        // 验证表单输入（这里只是简单示例）  
        var username = document.getElementById('username').value;  
        var password = document.getElementById('password').value;  
  
        if (username === '' || password === '') {  
            alert('用户名和密码不能为空！');  
            return;  
        }  
  
        // 假设验证通过，执行其他操作（例如，发送AJAX请求）  
        console.log('表单数据:', { username: username, password: password });  
  
        // 如果需要提交表单到服务器，可以取消注释下面的代码  
        // form.submit(); // 但在实际应用中，通常会使用AJAX来异步发送数据  
    });  
});

窗口和文档事件

事件	描述
DOMContentLoaded	当 HTML 文档被完全加载和解析后触发，无需等待样式表、图像等加载完成
load	在整个页面及其所有依赖资源（如样式表和图片）都加载完成后触发
resize	当窗口大小改变时触发
scroll	当文档被滚动时触发
beforeunload	当即将离开页面（刷新或关闭）时触发
unload	当用户退出页面时触发（注意：由于安全和性能原因，此事件在大多数现代浏览器中可能无法正常工作）

DOMContentLoaded 事件在 HTML 文档完全加载和解析后触发，不必等到样式表、图像等其他资源加载完成。因此，DOMContentLoaded 事件会比 load 事件早触发。

DOMContentLoaded 事件也是使用 addEventListener 方法来监听。

其他事件

事件	描述
hashchange	当当前 URL 的锚部分（hash）发生修改时触发
abort	当图像的加载被中断时触发
error	在加载文档或图像时发生错误时触发
…

HTML 事件属性

属性	描述
onload	网页加载事件
onclick	点击事件
ondblclick	双点事件
onmouseover	光标移上标签触发
onmouseout	光标移走时触发
onmousedown	光标按下事件
onmouseup	光标弹起事件

鼠标事件 click 和 HTML 事件 onclick 的区别：

click 是 JavaScript 中的一个事件类型，是写在 JavaScript 代码中的

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

onclick 是一个 HTML 事件属性，是写在 HTML 元素标签中的

<button id="myButton" onclick="alert('Button clicked!')">Click me</button>

注意：

使用 addEventListener 可以给一个元素可以添加多个相同类型的事件处理函数

<template>
  <button id="test1">测试</button>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  document.getElementById('test1').addEventListener('click', () => {
    console.log(1);
  });
  document.getElementById('test1').addEventListener('click', () => {
    console.log(2);
  });
});
</script>

点击按钮会同时打印 1 和 2

但是一个元素只能有一个相同类型的 HTML 事件属性，重复会报错 Duplicate attribute

onload 属性可以用在 <body>、<img>、<script> 标签，不能用在 <div>、<button> 等标签；同时它还是 window 对象的一个事件属性，用来指定当页面及其所有资源（包括图片、脚本、CSS 等）加载完成后要执行的函数。

<body onload="console.log('页面加载完成！')">
  <h1>欢迎访问我的网站！</h1>
</body>

<img src="image.jpg" onload="console.log('图片加载完成!')" />

<script src="example.js" onload="console.log('脚本加载完成!')"></script>

<script>
  window.onload = function() {
    alert('页面和所有资源加载完成1！');
  };
  
  // 在 js 中可以写多个 onload 而不会报错，但是后面的会覆盖前面的，并不会都执行
  window.onload = function() {
    alert('页面和所有资源加载完成2！');
  };
</script>

DOMContentLoaded、load、onload 执行顺序

window.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded 执行完毕');
});

window.addEventListener('load', function () {
  console.log('load 执行完毕');
});

window.onload = function () {
  console.log('onload 执行完毕');
};

// DOMContentLoaded 执行完毕
// load 执行完毕
// onload 执行完毕