一文理解js、vue、React事件机制

最新推荐文章于 2024-11-05 22:07:06 发布

码农巧克零

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量737

点赞数 3

分类专栏：编程前端开发程序员文章标签： javascript vue.js react.js

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142377937

版权

编程同时被 3 个专栏收录

138 篇文章 1 订阅

订阅专栏

前端开发

138 篇文章 1 订阅

订阅专栏

程序员

138 篇文章 2 订阅

订阅专栏

在前端开发中，事件机制是处理用户交互和系统事件的核心部分。JavaScript、React 和 Vue 都有各自的事件机制，但它们在实现细节上有所不同。下面是对这些机制的详细解释，包括事件冒泡和事件委托的概念。

1. JavaScript 事件机制

JavaScript 的事件机制基于浏览器的事件模型，主要包括事件捕获、事件冒泡和事件处理。

事件捕获与事件冒泡

事件捕获（Capture Phase）：事件从根节点向目标节点传播。
事件冒泡（Bubble Phase）：事件从目标节点向根节点传播。

事件监听与处理

代码解读

复制代码

element.addEventListener('click', function(event) { console.log('Event handled in bubble phase'); });// 事件默认在冒泡阶段触发 element.addEventListener('click', function(event) { console.log('Event handled in capture phase'); }, true); // true 表示事件在捕获阶段触发 // 添加事件监听 element.addEventListener('click', function(event) { console.log('Element clicked'); }, false); // false 表示事件在冒泡阶段触发 // 移除事件监听 element.removeEventListener('click', handler);

2. React 事件机制

React 事件机制与原生 JavaScript 事件机制有些不同。React 使用了合成事件系统来优化性能和一致性。React 的事件处理机制主要包括以下几点：

合成事件：React 封装了浏览器的原生事件为合成事件对象，以便在不同浏览器中提供一致的行为。
事件委托：React 在根节点上统一处理所有的事件，并根据事件的目标分发到相应的组件。这种方式提高了事件处理的效率。

3. Vue 事件机制

Vue 的事件机制与 React 类似，但也有其独特之处：

事件绑定：Vue 使用 v-on 指令绑定事件。
事件处理：Vue 在事件处理时，使用了事件修饰符来简化代码，如 .prevent、.stop 等

4. 事件冒泡

事件冒泡是指事件在 DOM 树中从目标元素向上冒泡，直到根元素。这个过程是事件从事件目标向上到达 document 对象的过程。在冒泡阶段，事件会在事件目标元素上触发，然后依次触发其父元素上的事件处理程序，直到到达 document 对象。

示例代码

html

代码解读

复制代码

<!DOCTYPE html> <html> <body> <div id="parent" style="padding: 50px; background: lightblue;"> Parent <div id="child" style="padding: 20px; background: lightcoral;"> Child </div> </div> <script> document.getElementById('parent').addEventListener('click', () => { alert('Parent clicked'); }); document.getElementById('child').addEventListener('click', () => { alert('Child clicked'); }); </script> </body> </html>

在上面的示例中，点击 child 元素时，child 元素的事件处理程序会先被触发，然后事件会冒泡到 parent 元素，parent 元素的事件处理程序也会被触发。

5. 事件委托

事件委托是指将事件处理程序绑定到父元素上，而不是直接绑定到每一个子元素上。这种方式可以减少事件处理程序的数量，特别是在有大量动态生成的子元素时。

示例代码

html

代码解读

复制代码

<!DOCTYPE html> <html> <body> <ul id="parent"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> document.getElementById('parent').addEventListener('click', (event) => { if (event.target.tagName === 'LI') { alert(`Item clicked: ${event.target.textContent}`); } }); </script> </body> </html>