JS事件详解(下)

今天来聊⼀聊事件的执⾏机制 结合上次跟大家分享的事件基础，如果还没有看过的童鞋，以下是传送门 【js事件详解】上 那么什么是事件的执⾏机制呢？ 思考⼀个问题 当⼀个⼤盒⼦嵌套⼀个⼩盒⼦的时候，并且两个盒⼦都有点击事件 你点击⾥⾯的⼩盒⼦，外⾯的⼤盒⼦上的点击事件要不要执⾏？ 1. 事件的传播 就像上⾯那个图⽚⼀样，我们点击在红⾊盒⼦身上的同时，也是点击在了粉⾊盒⼦上，这个是既定事实，那么两个盒⼦的点击事件都会触发，这个就叫做事件的传播 当元素触发⼀个事件的时候,其⽗元素也会触发相同的事件,⽗元素的⽗元素也会触发相同的事件,就像上⾯的图⽚⼀样 点击在红⾊盒⼦上的时候，会触发红⾊盒⼦的点击事件 JavaScript中的事件机制是Web开发中不可或缺的一部分，它允许开发者对用户与页面交互作出响应。在本文中，我们将深入探讨事件的传播、冒泡与捕获、阻止事件传播以及事件委托等概念。 事件的传播是指当一个元素发生事件时，不仅该元素，它的所有父元素也会触发相同的事件。这个过程可以形象地比喻为事件从内到外逐层传递，就像在一个红色盒子里面有一个粉色盒子，点击红色盒子时，两个盒子的点击事件都会被触发。这种现象称为事件冒泡。事件冒泡是从最内层的元素开始，沿着DOM树结构逐级向上，直到到达最外层的window对象。在此过程中，如果每个层级的元素都注册了同一类型的事件处理函数，那么这些函数都会被执行。 事件的另一种传播方式是事件捕获，它与冒泡相反，是从window开始，沿着DOM树向下，直到达到事件发生的元素。这意味着捕获阶段首先执行的是最外层的事件处理函数，然后逐渐向内执行，直到达到目标元素。 在事件传播中，我们可以利用`event.stopPropagation()`方法阻止事件继续向上冒泡，或者在IE浏览器中使用`event.cancelBubble = true`来达到相同的效果。这样，事件就不会继续影响到其他父元素。同时，`event.preventDefault()`方法可以阻止事件的默认行为，例如阻止链接的跳转或表单的提交。 事件委托是一种优化性能的技术，它允许我们将事件监听器添加到父元素上，而不是每一个子元素。由于事件冒泡的特性，当子元素触发事件时，父元素的事件处理函数也会被调用。通过检查`event.target`（或在IE中使用`event.srcElement`）属性，我们可以确定实际被点击的元素，从而实现对特定子元素的处理。事件委托的好处在于减少DOM操作，提高性能，并且新添加的子元素也可以继承已有的事件处理。 例如，以下代码演示了如何使用事件委托处理`ul`中的`li`点击事件： ```javascript var oUl = document.querySelector('ul'); oUl.addEventListener('click', function(e) { console.log('我是 ul 的点击事件，我被触发了'); var clickedLi = e.target.tagName === 'LI' ? e.target : null; if (clickedLi) { // 处理点击的li元素 } }); ``` 在这个例子中，即使没有直接为`li`元素绑定点击事件，当点击`li`时，`ul`的事件处理函数依然会被调用，我们可以根据`event.target`判断并处理具体的`li`元素。 总结来说，JavaScript的事件机制涉及事件传播、冒泡与捕获、阻止事件传播以及事件委托等多个重要概念。理解并熟练运用这些知识，将有助于编写更加高效、响应式的前端应用。