事件和事件处理机制
在JavaScript中，事件是用户或浏览器自身触发的操作，比如点击按钮、提交表单、页面加载完成等。事件处理机制允许我们对这些事件做出反应，执行特定的代码。
事件类型
- UI事件：与用户界面相关的事件，如
click、mouseover、mouseout等。 - 焦点事件：与元素获得或失去焦点相关的事件，如
focus、blur等。 - 鼠标事件：与鼠标操作相关的事件，如
mousedown、mouseup、mousemove等。 - 键盘事件：与键盘操作相关的事件，如
keydown、keyup等。 - 表单事件：与表单相关的事件，如
submit、reset、change等。 - 加载和卸载事件：与页面或浏览器的加载和卸载相关的事件，如
load、unload等。
事件处理程序
事件处理程序是当特定事件发生时执行的函数。你可以使用以下两种方式来添加事件处理程序：
内联方式：直接在HTML元素的事件属性中指定JavaScript代码。
<button onclick="alert('Hello World!')">Click Me!</button>JavaScript方式：使用
addEventListener方法在JavaScript代码中添加事件处理程序。document.getElementById('myButton').addEventListener('click', function() { alert('Hello World!'); });
事件对象
事件处理程序接收一个事件对象作为参数，该对象包含有关事件的详细信息，如事件类型、触发事件的目标元素等。
document.getElementById('myButton').addEventListener('click', function(event) {
console.log(event.type); // 输出事件类型
console.log(event.target); // 输出触发事件的元素
});
事件传播
事件传播指的是事件从被触发的元素开始，按照特定的顺序传播到其他元素的过程。事件传播分为三个阶段：
- 捕获阶段：事件从文档的根节点向下传播到目标节点。
- 目标阶段：事件到达目标节点。
- 冒泡阶段：事件从目标节点向上传播回文档的根节点。
可以通过设置addEventListener的第三个参数为true来使用事件捕获。
事件委托
事件委托是一种技术，它利用了事件冒泡的原理，将事件处理程序添加到父元素上，而不是每个子元素上。这样可以提高性能并减少内存使用。
document.getElementById('parentElement').addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
alert('Button clicked');
}
});
代码示例
假设我们有一个简单的HTML页面，包含一个按钮和一个列表，我们想要在点击按钮时添加一个新的列表项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Handling Example</title>
</head>
<body>
<button id="addListItem">Add List Item</button>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
// 获取按钮和列表元素
var addButton = document.getElementById('addListItem');
var myList = document.getElementById('myList');
// 为按钮添加点击事件处理程序
addButton.addEventListener('click', function() {
// 创建一个新的列表项
var newListItem = document.createElement('li');
newListItem.textContent = 'New Item';
// 将新列表项添加到列表中
myList.appendChild(newListItem);
});
</script>
</body>
</html>
