event 事件对象
在 JavaScript 中，event 是一个非常重要的对象，它包含了关于触发事件的详细信息。
1. event 事件对象的作用
event 对象是每次事件被触发时自动传递给事件处理器的一个参数。它提供了丰富的属性和方法，用于获取事件的相关信息并控制事件的行为。
提供事件上下文：event 对象包含了事件发生的具体细节，如事件类型、目标元素、时间戳等。允许操作事件流：通过调用 event 对象的方法（如 stopPropagation() 和 preventDefault()），可以控制事件如何传播或是否执行默认行为。
2. 使用场景
a. 处理用户输入
键盘事件：监听用户的按键操作，如 keydown, keyup 等，常用于游戏开发、表单验证等场景。
document.addEventListener('keydown', function(event) {
console.log(`键码: ${event.keyCode}`);
});
鼠标事件：捕获鼠标的点击、移动等动作，广泛应用于导航菜单、拖拽功能等。
document.getElementById('myButton').addEventListener('click', function(event) {
console.log(`按钮被点击了`);
});
b. 增强用户体验
阻止默认行为：某些情况下你可能不希望浏览器执行默认操作，比如提交表单时进行额外验证，或者阻止链接跳转。
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
console.log('链接点击被阻止');
});
停止事件冒泡：避免事件从子元素向父元素传播，防止不必要的副作用。
document.querySelector('.child').addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡到父元素
console.log('子元素被点击');
});
document.querySelector('.parent').addEventListener('click', function() {
console.log('父元素被点击');
});
c. 动态内容更新
异步请求：结合 AJAX 或 Fetch API，在用户与页面交互时加载新数据，而无需刷新整个页面。
document.querySelector('#loadMore').addEventListener('click', function(event) {
fetch('/more-data')
.then(response => response.json())
.then(data => {
// 更新页面内容
console.log(data);
});
});
3. 底层原理
a. 事件循环与任务队列
事件驱动模型：JavaScript 是基于事件驱动的语言，意味着代码执行是由事件触发的。当某个事件发生时（如点击按钮），浏览器会将对应的事件处理器添加到任务队列中等待执行。
微任务 vs 宏任务：根据不同的事件类型，它们会被分配到不同的队列中。例如，Promise 的回调函数属于微任务，而定时器 (setTimeout) 属于宏任务。浏览器会优先处理微任务队列中的任务。
b. 事件流
捕获阶段：当事件首次发生时，它会沿着 DOM 树向下传递，直到到达目标元素。在这个过程中，你可以为祖先元素设置事件监听器来捕获事件。
目标阶段：一旦事件到达实际触发它的元素（即目标元素），就会进入目标阶段，此时可以对该元素上的事件进行处理。
冒泡阶段：之后，事件会沿相反方向回溯，回到最顶层的根节点。这是大多数事件的默认行为，但可以通过 event.stopPropagation() 来中断。
c. 事件委托
提高性能：如果你有大量相似的子元素需要绑定相同的事件处理器，可以直接在它们共同的父元素上监听事件，并通过 event.target 判断具体哪个子元素触发了事件。这种方法减少了内存占用并提升了性能。
- Item 1
- Item 2
- Item 3
示例代码
在这个例子中：
event.type：获取事件的类型，这里是 "click"。event.target：指向触发事件的实际 DOM 元素，即
总结
event 事件对象是 JavaScript 中处理用户交互的核心工具之一，它不仅提供了对事件的全面了解，还赋予了开发者强大的控制能力。通过合理利用 event 对象的属性和方法，我们可以创建更加智能、灵活且高效的 Web 应用程序。