JS事件的概念
概念
在 JavaScript 中，事件是指发生在 HTML 元素上的动作或交互。这些动作可以是用户触发的（如点击、鼠标移动、键盘输入），也可以是浏览器触发的（如页面加载、资源加载完成）。事件使网页能够对用户行为或系统状态变化作出响应，从而实现动态交互功能。
事件的三要素
- 事件源（Event Target）：发生事件的 HTML 元素，例如按钮、输入框或文档本身。
- 事件类型（Event Type）：描述事件的名称，如
click、mouseover、keydown等。 - 事件处理程序（Event Handler）：当事件发生时执行的函数，也称为事件监听器（EventListener）。
常见事件类型
- 鼠标事件：
click、dblclick、mousedown、mouseup、mouseover、mouseout。 - 键盘事件：
keydown、keyup、keypress。 - 表单事件：
submit、change、focus、blur、input。 - 窗口事件：
load、resize、scroll、unload。 - 触摸事件（移动端）：
touchstart、touchend、touchmove。
事件处理方式
HTML 属性绑定
直接在 HTML 元素中通过 on[event] 属性绑定事件处理函数：
<button onclick="alert('Clicked!')">点击</button>
DOM 属性绑定
通过 JavaScript 代码为 DOM 元素的属性赋值：
const button = document.querySelector('button');
button.onclick = function() { alert('Clicked!'); };
addEventListener 方法
现代推荐方式，支持多个监听器且更灵活：
button.addEventListener('click', function() { console.log('事件触发');
});
事件对象
当事件触发时，浏览器会创建一个事件对象（Event Object），包含事件的相关信息（如触发元素、坐标、按键等）。可通过事件处理函数的参数访问：
element.addEventListener('click', function(event) {console.log(event.target); // 获取触发事件的元素
});
事件传播机制
事件在 DOM 树中传播分为三个阶段：
- 捕获阶段（Capturing Phase）：从根节点向下传递到目标元素。
- 目标阶段（Target Phase）：到达事件目标元素。
- 冒泡阶段（Bubbling Phase）：从目标元素向上冒泡到根节点。
可通过 addEventListener 的第三个参数控制监听阶段：
// 捕获阶段触发
element.addEventListener('click', handler, true); // 冒泡阶段触发（默认）
element.addEventListener('click', handler, false);
阻止默认行为和冒泡
- event.preventDefault()：阻止事件的默认行为（如表单提交、链接跳转）。
- event.stopPropagation()：阻止事件继续传播（冒泡或捕获）。
link.addEventListener('click', function(event) {event.preventDefault(); // 阻止链接跳转event.stopPropagation(); // 阻止事件冒泡
});