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

JavaScript事件

news 2025/7/16 8:29:54

本文详细介绍JavaScript事件机制。

本文目录

- - - 1. 事件类型分类
    - 2. 事件绑定方式
    - 3. 事件对象
    - 4. 事件冒泡与捕获
    - 5. 事件委托
    - 6. 自定义事件
    - 7. 事件应用场景

JavaScript 事件是浏览器与用户交互的基础机制，允许代码对用户行为，如点击、滚动或浏览器状态变化，如页面加载完成做出响应。下面详细介绍关于 JavaScript 事件的核心概念和使用方法。

1. 事件类型分类

JavaScript 支持多种事件类型，常见的分为以下几类：

// 鼠标事件
document.addEventListener('click', function() { /* 点击事件 */ });
document.addEventListener('dblclick', function() { /* 双击事件 */ });
document.addEventListener('mouseover', function() { /* 鼠标悬停 */ });
document.addEventListener('mouseout', function() { /* 鼠标移出 */ });// 键盘事件
document.addEventListener('keydown', function(e) { /* 按键按下 */ });
document.addEventListener('keyup', function(e) { /* 按键释放 */ });
document.addEventListener('keypress', function(e) { /* 字符输入 */ });// 表单事件
document.querySelector('form').addEventListener('submit', function(e) {e.preventDefault(); /* 阻止表单提交 */
});
document.querySelector('input').addEventListener('change', function() { /* 值变更 */ });
document.querySelector('input').addEventListener('focus', function() { /* 获得焦点 */ });// DOM 加载事件
window.addEventListener('load', function() { /* 页面完全加载 */ });
document.addEventListener('DOMContentLoaded', function() { /* DOM 解析完成 */ });// 窗口事件
window.addEventListener('resize', function() { /* 窗口大小改变 */ });
window.addEventListener('scroll', function() { /* 页面滚动 */ });
window.addEventListener('beforeunload', function(e) { /* 页面即将卸载 */ });

2. 事件绑定方式

有三种主要的事件绑定方式：

// 1. HTML 内联事件（不推荐，结构与行为耦合）
<button onclick="handleClick()">点击我</button>// 2. DOM0 级事件
const button = document.querySelector('button');
button.onclick = function() {console.log('按钮被点击');
};// 3. DOM2 级事件
button.addEventListener('click', function() {console.log('事件处理函数1');
});
button.addEventListener('click', function() {console.log('事件处理函数2'); // 可以添加多个处理函数
});

3. 事件对象

事件处理函数接收一个事件对象，包含事件相关信息：

document.addEventListener('click', function(event) {// 事件基本信息console.log(event.type);      // 事件类型（如"click"）console.log(event.target);    // 触发事件的原始元素console.log(event.currentTarget); // 绑定事件的元素// 鼠标事件特有属性console.log(event.clientX, event.clientY); // 鼠标相对于视口的坐标console.log(event.pageX, event.pageY);     // 鼠标相对于页面的坐标// 键盘事件特有属性console.log(event.key);       // 按下的键名console.log(event.code);      // 键码console.log(event.ctrlKey);   // Ctrl 键是否按下// 阻止默认行为（如链接跳转、表单提交）event.preventDefault();// 阻止事件冒泡event.stopPropagation();
});

4. 事件冒泡与捕获

事件在 DOM 树中有两种传播方式：

// 事件冒泡（默认）：从触发元素向上传播到父元素
document.querySelector('div').addEventListener('click', function() {console.log('DIV 被点击');
});
document.querySelector('button').addEventListener('click', function() {console.log('BUTTON 被点击'); // 先触发// 事件会继续冒泡到 DIV 和 document
});// 事件捕获（第三个参数设为 true）：从 document 向下传播到触发元素
document.querySelector('div').addEventListener('click', function() {console.log('DIV 捕获阶段'); // 先触发
}, true);
document.querySelector('button').addEventListener('click', function() {console.log('BUTTON 被点击');
}, false); // 默认冒泡阶段

5. 事件委托

利用事件冒泡，将事件处理程序绑定到父元素：

// 为动态添加的元素绑定事件
document.querySelector('ul').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('点击了列表项:', event.target.textContent);}
});// 动态添加的 LI 也会触发事件
const newLi = document.createElement('li');
newLi.textContent = '新项目';
document.querySelector('ul').appendChild(newLi);

6. 自定义事件

创建和触发自定义事件：

// 创建自定义事件
const myEvent = new Event('customEvent');// 绑定事件处理程序
document.addEventListener('customEvent', function() {console.log('自定义事件被触发');
});// 触发事件
document.dispatchEvent(myEvent);// 带数据的自定义事件
const dataEvent = new CustomEvent('dataEvent', {detail: { message: '这是自定义数据' }
});
document.addEventListener('dataEvent', function(event) {console.log('收到数据:', event.detail.message);
});
document.dispatchEvent(dataEvent);

7. 事件应用场景

// 1. 页面加载完成后执行代码
document.addEventListener('DOMContentLoaded', function() {// DOM 已加载，可安全操作
});// 2. 防止表单默认提交
document.querySelector('form').addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单提交// 处理表单数据
});// 3. 滚动监听（实现回到顶部按钮）
window.addEventListener('scroll', function() {const scrollTop = window.pageYOffset || document.documentElement.scrollTop;if (scrollTop > 300) {document.querySelector('#backToTop').style.display = 'block';} else {document.querySelector('#backToTop').style.display = 'none';}
});// 4. 键盘快捷键
document.addEventListener('keydown', function(e) {if (e.ctrlKey && e.key === 's') {e.preventDefault(); // 阻止浏览器默认的保存行为saveDocument();}
});