JavaScript DOM事件(笔记)

### JavaScript DOM事件流 JavaScript中的DOM事件流主要有两种模式，分别是事件冒泡和事件捕获。 #### 事件冒泡 事件冒泡是指事件从最具体的元素开始触发，然后向上传播至最不具体的节点。例如，在一个包含嵌套元素的文档中，点击一个子元素，事件首先会在该元素上触发，然后是父元素，依此类推，直至最外层的根元素。冒泡顺序是按照DOM树的深度顺序，由内向外进行。 #### 事件捕获 与事件冒泡相对的是事件捕获，它指的是事件从最不具体的节点开始触发，然后向下传递至最具体的节点。在事件捕获的顺序中，事件首先会被最外层的根元素捕获，然后逐步向内传递，直到达到实际触发事件的元素。事件捕获是DOM规范所定义的模型，但在IE浏览器中不被支持，因此使用较少。 ### JavaScript DOM事件处理程序 在JavaScript中，处理DOM事件可以通过多种方式实现，主要的有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序以及IE事件处理程序。 #### HTML事件处理程序 在HTML元素中直接使用事件属性来编写事件处理逻辑，例如使用`onclick`属性。这种方式的缺点是HTML和JavaScript代码耦合在一起，不够灵活。 ```html <input type="button" value="按钮" onclick="showMessage()"> ``` #### DOM0级事件处理程序 这是较传统的一种方式，通过把一个函数赋值给一个元素的事件属性来添加事件处理程序，例如`onclick`。这种方法的优点是简单且跨浏览器兼容。 ```javascript var btn2 = document.getElementById('btn2'); btn2.onclick = function() { alert('这是通过DOM0级添加的事件!'); }; btn2.onclick = null; // 删除事件处理程序 ``` #### DOM2级事件处理程序 DOM2级事件定义了`addEventListener()`和`removeEventListener()`两个方法，用于添加和删除事件处理程序。这种方式可以为同一个事件添加多个处理程序，并且可以指定事件是在冒泡阶段还是捕获阶段执行。 ```javascript var btn3 = document.getElementById('btn3'); btn3.addEventListener('click', showMessage, false); // 添加事件处理程序 btn3.removeEventListener('click', showMessage, false); // 删除事件处理程序 ``` #### IE事件处理程序及跨浏览器兼容 在IE浏览器中，事件处理程序的添加和删除使用`attachEvent()`和`detachEvent()`方法，这些方法与DOM2级事件处理程序的工作方式类似，但是它们使用`onclick`等来代替`addEventListener`中的`click`。 为了实现跨浏览器兼容，通常会将不同浏览器的事件处理程序封装在一个对象中，如`eventUtil`，通过判断浏览器支持哪种方式来决定使用哪一种方法。 ```javascript var btn3 = document.getElementById('btn3'); btn3.attachEvent('onclick', showMessage); // IE浏览器添加事件 btn3.detachEvent('onclick', showMessage); // IE浏览器删除事件 ``` ### 事件对象 在触发DOM上的事件时，会生成一个事件对象`event`，该对象包含了与事件相关的信息和方法。 #### 获取事件类型和目标 事件对象可以通过`type`属性获取事件的类型，通过`target`属性获取触发事件的元素。 ```javascript btn3.onclick = function(event) { var eventType = event.type; // 获取事件类型 var eventTarget = event.target; // 获取事件目标 } ``` #### 停止事件传播 事件对象中的`stopPropagation`方法可以阻止事件继续传播，即停止事件冒泡。 ```javascript btn3.onclick = function(event) { event.stopPropagation(); // 阻止事件冒泡 } ``` 注意，上述代码中`event`应通过参数传递给事件处理函数，而不是通过`window.event`访问，以保证兼容性和代码质量。 ### 总结 JavaScript事件处理是Web开发中不可或缺的一部分，了解和掌握这些事件处理机制对于创建响应式的网页和丰富的用户交互体验至关重要。DOM事件处理程序的多种方式允许开发者根据具体需求选择最适合的方法，而事件对象的使用则能够帮助开发者获取更多的事件细节，从而进行精确的事件处理。