在 JavaScript 中，事件（Event） 是指用户与网页进行交互时发生的各种操作，例如点击、按键、加载、鼠标移动等。通过处理这些事件，可以让网页变得更加动态和交互性强。
1. 常见的事件类型
鼠标事件：
click：鼠标点击事件。dblclick：鼠标双击事件。mouseenter：鼠标移入元素的事件。mouseleave：鼠标移出元素的事件。mousemove：鼠标移动事件。mousedown：鼠标按下事件。mouseup：鼠标释放事件。
键盘事件：
keydown：按下键盘上的任意键时触发。keypress：按下并保持按键时触发（已废弃，使用keydown）。keyup：松开键盘上的按键时触发。
表单事件：
submit：表单提交时触发。change：表单元素的值变化时触发。focus：表单元素获得焦点时触发。blur：表单元素失去焦点时触发。
文档事件：
load：页面或资源加载完成时触发。resize：浏览器窗口大小变化时触发。scroll：页面滚动时触发。
其他事件：
focus：元素获得焦点时触发。blur：元素失去焦点时触发。
2. 事件绑定
JavaScript 提供了几种方法来绑定事件处理程序。
a. 使用 HTML 属性
可以直接在 HTML 标签中添加事件处理程序属性，例如 onclick、onmouseover 等。
<button onclick="alert('Button clicked!')">Click Me</button>b. 使用 addEventListener() 方法
addEventListener() 是一种更加灵活的绑定事件的方法，它允许将多个事件处理程序添加到同一个元素，并且可以指定事件的捕获或冒泡阶段。
let button = document.querySelector("button");
button.addEventListener("click", function() {
alert("Button clicked!");
});addEventListener()的语法：
element.addEventListener(event, function, useCapture);event：要监听的事件类型（例如"click"、"keydown"）。function：事件发生时要调用的函数。useCapture（可选）：如果为true，事件会在捕获阶段触发；如果为false（默认），事件会在冒泡阶段触发。
c. 使用 onclick 属性
onclick 是元素的一个属性，可以为它直接赋值为一个函数，处理点击事件。
<button onclick="handleClick()">Click Me</button>
<script>
function handleClick() {
alert("Button clicked!");
}
</script>3. 事件对象
当事件发生时，JavaScript 会将一个 event 对象传递给事件处理函数。该对象包含了关于事件的详细信息，例如触发事件的元素、事件类型、鼠标位置等。
例子：
let button = document.querySelector("button");
button.addEventListener("click", function(event) {
console.log(event); // 输出事件对象
console.log(event.target); // 输出触发事件的元素
console.log(event.type); // 输出事件类型，例如：click
});常用的 event 对象属性包括：
target：触发事件的元素。type：事件类型（例如"click"、"keydown"）。clientX和clientY：鼠标点击位置的坐标（相对于浏览器视口）。keyCode或code：按键事件的键码（例如，Enter键为 13）。
4. 事件冒泡与捕获
JavaScript 事件有 冒泡（Bubbling） 和 捕获（Capturing） 两个阶段。
- 冒泡：事件从最深的嵌套元素向外冒泡，直到到达最外层的元素。
- 捕获：事件从最外层的元素捕获到最深的嵌套元素。
默认情况下，事件是以冒泡的方式传播的。使用 addEventListener() 方法时，可以指定事件的传播阶段。
let div = document.querySelector("div");
let button = document.querySelector("button");
div.addEventListener("click", function() {
alert("Div clicked!");
}, false); // false 表示在冒泡阶段触发事件
button.addEventListener("click", function() {
alert("Button clicked!");
}, true); // true 表示在捕获阶段触发事件在上面的例子中，button 的点击事件先触发，因为它在捕获阶段；然后 div 的点击事件在冒泡阶段触发。
5. 事件委托
事件委托是一种常见的优化技术，它利用了事件的冒泡特性，允许将事件处理程序绑定到父元素上，而不是每个子元素上。这样可以有效减少内存的使用，特别是对于动态生成的元素。
例子：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
let list = document.getElementById("list");
list.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
alert("Item clicked: " + event.target.textContent);
}
});
</script>在这个例子中，click 事件处理程序绑定到 ul 元素上，而不是每个 li 元素上。这样，当用户点击任何一个 li 元素时，事件会冒泡到 ul 元素，处理程序会判断事件目标 event.target 是否是 li 元素，从而决定是否执行相应的操作。
6. 阻止默认行为与事件传播
有时需要阻止事件的默认行为（例如，提交表单或链接跳转）或阻止事件的传播（例如，阻止事件继续冒泡）。
- 阻止默认行为：使用
event.preventDefault()来阻止事件的默认行为。
let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单提交
alert("Form submission prevented");
});- 阻止事件传播：使用
event.stopPropagation()来阻止事件传播（冒泡）。
let div = document.querySelector("div");
let button = document.querySelector("button");
div.addEventListener("click", function() {
alert("Div clicked!");
});
button.addEventListener("click", function(event) {
event.stopPropagation(); // 阻止事件冒泡
alert("Button clicked!");
});7. 总结
- JavaScript 事件是网页与用户交互的核心，通过事件处理程序可以响应用户的点击、键盘输入等操作。
- 可以通过
addEventListener()、onclick等方法绑定事件。 - 事件对象提供了事件的相关信息，如触发元素、事件类型、鼠标位置等。
- 事件可以在冒泡和捕获阶段传播，可以使用
stopPropagation()和preventDefault()来控制事件的传播和默认行为。
更多详细内容请关注其他相关文章！