js-----事件的委派

最新推荐文章于 2022-09-29 08:52:09 发布
最新推荐文章于 2022-09-29 08:52:09 发布
阅读量184 收藏
点赞数
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52551539/article/details/122143296
版权
这篇博客讨论了如何处理HTML中ul元素的点击事件，当点击事件被整个ul区域捕获，导致li内的链接也被触发。通过使用JavaScript的event.target属性，可以精确地判断点击位置，避免链接被意外触发。文章提供了示例代码，展示了如何正确地阻止事件冒泡，确保只有预期的元素响应事件。
摘要由CSDN通过智能技术生成

 下面给ul绑定单击响应事件，这样点击每个li里面的超链接都会被触发，需要注意的是，下面背景为#bfa的整个区域都是ul，点击下面这个区域的任何部分都会触发事件不止超链接

 我们可以通过target来解决这个问题：

 

向北航行五万里
关注
JS中事件的委派
ChuanyangChen的博客
02-21 1442
什么是事件的委派❓ 指事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素 事件的委派利用了事件的冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 ???? 例子：通过事件委派，实现点击<ul></ul>中的每一个<li></li>都能弹出弹框，弹框里面写着“H-E-L-L-O” 但该例子存在一些问题，代码后面会继续阐述 <!DOCTYPE html> <html lang="en"> <he
【DOM】JavaScript-事件高级-注册事件-事件流-事件对象-事件冒泡-委派-鼠标键盘事件
YK菌的博客
01-05 362
文章目录1. 注册事件（绑定事件）1.1 注册事件概述传统注册方式方法监听注册方式1.2 addEventListener 事件监听方式1.3 attachEvent 事件监听方式 IE8-1.4 注册事件兼容性解决方案2. 删除事件（解绑事件）2.1 删除事件的方式2.1.1 传统注册方式2.1.2 方法监听注册方式2.2 删除事件兼容性解决方案3. DOM事件流3.1 DOM 事件流分为3个阶段：3.2 注意4. 事件对象4.1 什么是事件对象4.2 事件对象的使用语法4.3 事件对象的兼容性方案4.4
js事件委派
xxhsym的博客
03-01 335
事件委派： 指将事件统一绑定给元素的共同的祖先元素， 这样当后代元素上的事件触发时，会一直冒泡到祖先元素。 事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。 <script type="text/javascript"> window.onload=function(){ var ul=document.getElementById("ul"); var bt...
JS 事件委派
mengxianglong123的博客
05-04 871
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var...
JS事件委派
最新发布
weixin_54687679的博客
09-29 289
事件的委派时利用了事件的冒泡，通过委派减少事件的绑定的次数，提高程序的运行效率。例子： 未完待续…
js事件的委派
xing_kai_kai的博客
07-22 455
事件的委派 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 案例及说明： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javas
javaScript-08-gallery:单元8-冒泡事件健谈事件。 交叉口观察员
05-27
在ul.js-gallery画廊上实现委派，并获取大图像的url。 通过单击图库项目来打开模式窗口。 欺骗img.lightbox__image元素的src属性的值。 通过单击按钮[data-action =“ close-lightbox”]关闭模式窗口。 清除img...
provenjs-jquery：基于事件的jQuery插件，用于html表单的客户端验证
03-01
将事件委派给表单，以便可以随时修改表单DOM。 通过动态显式控制配置选项。 通过一套jQuery模块化设计。 实时和表单提交验证。 有状态的验证。 输入消毒。 符合可访问性标准508节和WCAG 2.0（A，AAA，AAAA）...
goit-js-hw-08-gallery:https
04-12
实现对ul.js-gallery委派，并获取大图像的url 。 通过单击图库项目来打开模式窗口。 欺骗img.lightbox__image元素的src属性的值。 通过单击button[data-action="close-lightbox"]关闭模式窗口。 img.light
goit-js-hw-08-gallery
04-19
实现对ul.js-gallery委派，并获取大图像的url 。 通过单击图库项目来打开模式窗口。 欺骗img.lightbox__image元素的src属性的值。 通过单击button[data-action="close-lightbox"]关闭模式窗口。 img.lightbox__...
js-event事件
01-14
Event是Javascript中的重要事件，event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操作,下面是对这个对象的简单总结，希望跟大家一起学习
js 事件的委派
m0_52946104的博客
09-20 616
js委派事件
js的事件委派
weixin_46564011的博客
01-16 122
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*事件的委派说白了就是 减少多个事件的单独赋值 把时间的响应都通过冒泡交给父元素 进行节约 * 并且使用event参数通过事件参数的ta.
JS事件的委派
LIANG_XJT的博客
05-09 340
对于JS事件的委派我们并不陌生，使用js事件的委派能让我们关于事件的绑定进行一系列的操作。 用简单的语言来说就是当事件被绑定到一个祖先元素，然而它的后代元素被触发时那么它就会一直冒泡到祖先元素从而触发祖先元素所绑定的函数事件，那么关于它的使用以及方法下面我来用两个例子来实现对于委派的使用 1 首先我们要完成的是图片之间的切换，更换背景图片的这个功能，那么对于这个案例来说分为两个步骤：第一就是把布局设置好和所要引用到的属性值，通过style属性来完成我们所需要完成的页面布局， 在这里...
JS--事件委派
weixin_44134816的博客
03-21 308
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
关于JS中的事件委派
weixin_30955617的博客
06-30 99
　　在介绍JS中事件委派之前先来看看一个简单的需求：为每一个超链接绑定一个单击响应函数并在控制台打印一句话，内容是：” a 标签的单击响应函数“。下面是这个需求的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
JS委派事件
Sakura_Momoko
02-28 1218
当页面中的某些标签不是用html直接写上去的，而是用js动态添加上去的时候，如果该标签要进行点击、聚焦等事件时，必须使用委派事件来为该标签添加事件。如下： $("body").delegate("xx","click",function(){ //要被点击的标签为xx 支持class、id等 } //鼠标经过事件(tr hover显示图片) $("body").dele
jQuery事件绑定与处理详解
jQuery事件委派是通过在较高层级的祖先元素上绑定事件，然后根据传递的事件和选择器来处理实际的目标元素。这种方式优化了性能，尤其在处理大量动态生成的元素时。 ### jQuery对象的拷贝 jQuery提供了`.clone()`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值