js的事件代理/委托

最新推荐文章于 2024-07-25 14:02:05 发布
最新推荐文章于 2024-07-25 14:02:05 发布
阅读量350 收藏
点赞数
分类专栏： js 文章标签： javascript 处理事件过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21205435/article/details/52626023
版权

浏览器处理DOM事件的过程

对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里我们主要介绍W3C对DOM2.0定义的标准事件。

DOM2.0模型将事件处理流程分为三个阶段：
一、事件捕获阶段
二、事件目标阶段
三、事件冒泡阶段
如图：
这里写图片描述

指尖上的艺术1994
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件代理
weixin_43370067的博客
06-22 75
将事件添加到父元素身上，当事件发生的时候，父元素会找到对应触发事件的子元素去处理，后期添加的子元素也有这个效果 <script> var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(ev){ var oEvent = window.event||ev; var target = oEvent.target || oEvent
js-事件冒泡、事件委托
qq_24892029的博客
11-08 383
DOM事件流模型 三阶段 在DOM兼容浏览器中，事件流分为3个阶段： （1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段； （2）目标阶段：真正的目标节点正在处理事件的阶段； （3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。 独特性质 DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触...
js之事件代理/事件委托
辽辽无期的博客
02-24 596
使用事件代理的好处不仅在于将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素节点（如：a、span等），我们不必再一次循环给每一个元素绑定事件，直接修改事件代理的事件处理函数即可。：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；事件代理也叫事件委托，原理：利用DOM元素的事件冒泡，指定一个事件的处理程序就可以管理某一类型的所有事件。：在目标节点上触发，称为“目标阶段”
JS 事件代理和事件委托
csdssdn的博客
05-18 2122
事件委托的概念理解 为什么叫事件委托？它还有一个名字叫事件代理。 JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托
【前端】详解JavaScript事件代理（事件委托）
热门推荐
06-10 1万+
【前端】详解JavaScript事件代理（事件委托）
浅析JavaScript的事件代理和委托
02-25
首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于...
JavaScript事件代理和委托详解
11-23
事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡机制,下面我们具体举个...
js事件委托和事件代理案例分享
12-01
事件委托和事件代理是JavaScript中处理DOM事件的一种高效策略，主要利用了事件的冒泡机制。在HTML结构中，特别是存在大量相似元素时，事件委托能够显著减少代码量，提高性能，因为它允许我们在父级元素上绑定一次...
详解js的事件代理（委托）
01-19
JavaScript事件代理（委托）一般用于以下情况：  1. 事件注册在祖先级元素上，代理其子级元素。可以减少事件注册数量，节约内存开销，提高性能。  2. 对js动态添加的子元素可自动绑定事件。 之前一直用各种js库的...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1067
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1168
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1020
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 292
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 970
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 542
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 365
thinkphp8图片上传的验证
Vue3可媲美Element Plus Tree组件实战之移除节点
最新发布
felix_alone2012的博客
07-25 539
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 863
el-menu根据多层树形结构递归遍历展示菜单栏
js事件委托和事件代理和事件冒泡
05-25
事件委托和事件代理是同一个概念，它们都是利用事件冒泡机制来实现的。事件冒泡指的是事件从最具体的元素开始，逐级...总的来说，事件委托/代理是一种优化事件绑定的方式，可以减少大量的事件绑定操作，提高页面性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值