事件
JavaScript和html之间的交互是通过事件实现的。事件就是用户或者浏览器自身执行的某种动作。响应某个事件的函数就叫做事件处理函数。
事件对象
当事件被触发时，浏览器会创建一个事件对象，这个对象包含了与事件相关的信息，比如事件的类型，事件发生的位置等。事件对象会在事件处理函数中作为参数传递。
常见的属性
event.target：事件源，即触发事件的元素。
event.type：事件类型（例如 “click”, “keydown” 等）。
event.preventDefault()：阻止事件的默认行为（例如，阻止表单提交、链接跳转等）。
event.stopPropagation()：阻止事件的冒泡，防止事件传递到父元素。
document.getElementById('myButton').addEventListener('click', function(event) {console.log(event.target); // 输出触发事件的元素event.preventDefault(); // 阻止按钮的默认行为
});
事件绑定
将一个事件附加到DOM元素上的过程就是事件绑定。
事件绑定通常有三种方式
内联绑定
内联绑定就是在DOM元素中直接绑定事件。
<!-- 在HTML中直接绑定点击事件 --><button onclick="alert('按钮被点击了！')">点击我</button>
onclick事件为DOM 0级标准，这个事件的优先级是最高的。但是内联绑定事件的缺陷是每个元素不能绑定多个事件处理程序，影响代码的清晰度和可维护性。
js代码绑定
通过对象.事件的形式给对象绑定事件。
<button id="myButton">点击我</button>const button = document.getElementById('myButton');// 通过 JavaScript 绑定点击事件button.onclick = function() {alert('按钮被点击了！');};
代码绑定事件只能给一个DOM元素绑定一个函数，如果再次为onclick复制，会覆盖原有的绑定事件。
事件监听器
通过addEventListener()方法给对象绑定事件，是最推荐的事件绑定方法，它可以为同一个事件绑定多个事件处理程序，并且可通过removeEventListener()方法移除事件处理程序。支持事件的捕获和冒泡机制，更灵活。
<button id="myButton">点击我</button>const button = document.getElementById('myButton');// 使用 addEventListener 为按钮绑定事件button.addEventListener('click', function() {alert('按钮被点击了！');});// 同一个元素可以绑定多个事件处理程序button.addEventListener('click', function() {console.log('按钮点击了，执行第二个事件处理程序');});
通过button.addEventListener(‘click’, function() {})绑定事件可以为同一个按钮绑定多个click事件。
事件回调机制
事件回调机制是js和浏览器交互的核心，通过addEventListener绑定事件与回调函数，当事件触发时，回调函数会被调用。
事件冒泡
事件冒泡描述了浏览器如何处理针对嵌套元素的事件。事件开始的时候从最深层节点接收，之后沿DOM树逐级向上传播，直至document对象。
事件捕获
事件捕获和事件冒泡是相反的，事件捕获是从最顶层节点开始接收事件，然后逐级向下传播，直至最深层节点。
事件的默认传播顺序是先通过捕获阶段从顶级父元素向下传播，到达目标元素之后通过冒泡阶段向上传播，到达顶级父元素结束。
可以通过addEventListener()方法的第三个参数来设置事件处理程序的执行时机，true表示捕获阶段，false表示冒泡阶段。
// 事件捕获阶段
document.getElementById('parent').addEventListener('click', function(event) {console.log('捕获阶段触发');
}, true); // true 表示捕获阶段// 事件冒泡阶段
document.getElementById('parent').addEventListener('click', function(event) {console.log('冒泡阶段触发');
}, false); // false 表示冒泡阶段
事件委托原理与实现
事件委托利用事件冒泡机制来捕获事件，而不是将事件绑定到每个子元素上。比如将一个点击事件绑定到父元素，当子元素被点击时，事件会冒泡到父元素，这时父元素的事件监听器就能捕获这个事件。
如果给每个子元素绑定点击事件，当子元素很多时，性能会下降。而事件委托只需要在父元素上绑定一次事件，就可以处理所有子元素的事件，提高了性能。
事件委托通常用于为许多相似的元素添加相同的处理，但不仅限于此。例如可以在父容器元素上绑定事件，之后找到event.target，事件发生在指定元素内就处理该事件。
具象化的例子：一个有9个单元格的table表格，点击任意单元格，都会触发事件，并高亮显示该单元格。（也可以是99个单元格，999个单元格甚至更多）。
实现：table添加点击事件并添加监听器，捕获所有的td去除高亮，之后使用event.target给点击的td设置高亮。
html
<table id="table"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>style
<style>/* 高亮显示的样式 */.highlight {background-color: yellow;}/* 给表格添加一些样式 */table {border-collapse: collapse;width: 100%;}td {border: 1px solid #ddd;padding: 8px;text-align: center;cursor: pointer;}</style>
js
// 获取表格元素const table = document.getElementById('table');// 为表格绑定点击事件table.addEventListener('click', function(event) {// 确保点击的目标是 <td> 元素if (event.target.tagName === 'TD') {// 移除所有 <td> 的高亮const allTd = table.getElementsByTagName('td');for (let td of allTd) {td.classList.remove('highlight');}// 为当前点击的 <td> 添加高亮event.target.classList.add('highlight');}});
异步回调机制
js是单线程的编程语言，事件回调机制和异步编程（如setTimeout、Promise、async/await）结合紧密。事件回调通常是在事件队列中异步执行的，这意味着他们会在当前执行栈中的代码执行完毕后才会执行。
console.log('开始');
setTimeout(function() {console.log('回调函数执行');
}, 0);
console.log('结束');
输出顺序
开始
结束
回调函数执行
事件回调的执行顺序
- 事件触发并将回调函数加入任务队列
- 执行当前栈中的同步代码
- 同步代码执行完毕，事件队列中的回调函数被放入执行栈中执行。
事件处理常见问题与方案详解
事件处理程序被覆盖：使用 addEventListener 绑定多个事件处理程序。
事件冒泡与捕获：使用 event.stopPropagation() 阻止冒泡，并通过 addEventListener 设置捕获或冒泡阶段。
性能问题：使用事件委托将事件绑定到父元素，减少内存消耗。
this 指向问题：使用普通函数确保 this 指向正确的元素，或者通过 bind() 绑定 this，箭头函数注意
异步问题：使用 async/await 或事件处理程序处理异步操作。
防止多次绑定事件：通过 { once: true } 选项确保事件处理程序只触发一次。
