事件委托如何获取当前点击元素

最新推荐文章于 2024-08-01 13:31:18 发布
原创 最新推荐文章于 2024-08-01 13:31:18 发布 · 3.8k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一个使用jQuery实现事件委托的具体示例，通过监听ul元素上的click事件并针对li元素进行响应，展示了如何通过evt.target获取被点击的目标元素。此方法提高了事件处理的效率和代码的可维护性。 
$('ul').on('click','li',function(evt){
    var hotel = $(evt.target).text();
})

直接evt.target即可获取目标元素

JavaScript技巧：获取当前行的值
ByteZenith的博客
09-21 1705
当用户点击表格中的任何单元格时，事件将冒泡到表格元素，并且我们可以通过检查事件的目标元素来确定用户点击的是哪个单元格。然后，我们可以获取该行的引用，并提取所需的值。在上面的示例中，我们首先获取表格元素和所有行的引用。当用户点击某一行时，事件处理程序将获取该行中的单元格引用，并提取相应的值。我们还可以使用事件委托的方式来获取当前行的值。事件委托是一种将事件处理程序附加到父元素上，并利用事件冒泡原理来处理子元素事件的技术。另一种常见的方式是在HTML元素上使用自定义数据属性来存储行的值。属性来存储相应的值。
通过事件委托获取点击元素的索引
qq_42286878的博客
06-04 1161
事件委托的运用
js获取元素的方法
zybijiso666的博客
08-01 5200
getElementsByClassName()方法返回一个包含了所有指定类名的子元素的类数组对象，作为nodeList对象。documentElement是整个节点树的根节点，即html标签 HTML文档返回对象为HTML元素。getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的。(documentElement是一个会返回文档对象的根元素的只读属性)documentElement属性以一个元素对象返回一个文档的文档元素。如果HTML元素缺失，返回值为null。
js获取元素的方法及具体案例
m0_62697897的博客
09-26 1888
（3）通过class名获取：document.getElementsByClassName('class名')（4）通过name获取：document.getElementsByName('name') 表单。（2）通过标签名获取：document.getElementsByTagName('标签名')（3）不只是通过document对象获取元素，也可以通过父元素获取子元素。（1）通过id获取：document.getElementByid('id名')（2）获取属性：元素.属性名。（5）通过选择器获取。
【JAVAScript】【4】利用事件委托简化点击事件（包含箭头函数，target）
weixin_51612770的博客
05-18 1711
JAVASCript利用事件委托简化点击事件 当写多个点击事件时我总是会添加很多监听函数，但是利用事件委托后仅需添加父元素的监听函数，在利用冒泡就可以为每个子元素添加监听函数，大大简化了程序 文章目录JAVASCript利用事件委托简化点击事件前言一、事件委托二、箭头函数三、Element.target四、实例总结 前言 以下是围绕事件委托（事件代理）的一个切换案例，同时补充箭头函数和Element.target 一、事件委托 JavaScript中常用绑定事件的常用技巧，“事件委托”即是把原本需要
javascript事件处理二 事件对象event详解及target和currentTarget区别
ScottePerk的博客
11-09 2025
在处理事件的时候，所有和事件相关的东西都封装到event这个对象里面。所以这个对象非常的重要。这个对象有非常多的内容，我们讨论几个计较常见和以及比较难区别的target和currentTarget。
html普通按钮代码命名,获取当前按钮或者html的ID名称
weixin_32098191的博客
06-09 773
下面为大家带来一篇获取当前按钮或者html的ID名称实例(推荐)。挺不错的，现在就分享给大家，也给大家做个参考。今天做的上传图片，点击图片删除。随机给图片id，获取图片id，然后删除图片。由于图片id是随机的，用点击img或者点击class，获取id都不行，最后用onclick事件获取。js代码如下：$("#pic").append("");开始这样获取：function upimg(){var ...
小程序路由跳转携带参数方法（直接跳转、事件委托跳转）
weixin_30437481的博客
07-27 314
一、跳转事件绑定在当前点击的元素上 1.定义data-myName(myName为自定义的需要携带的参数名称) 2.绑定的函数中，event对象中currentTarget包含传递的自定义信息。 二、跳转事件绑定在父元素上（即事件委托） 1.在发生点击事件的子元素上写入属性data-xxxx; 2.跳转事件中接收event对象，传入的自定义data-xxxx在even...
事件委托
小小的少年
03-13 351
就是利用事件传播的机制, 把自己的事件委托给别人来做 把子元素本身需要绑定的事件, 直接绑定给共同的父元素 在父元素的事件里面通过事件目标来判断你点击的是谁 事件委托相比于循环绑定事件的优点 对于 DOM 操作的减少 动态添加的元素不需要单独添加事件 整套的替换元素, 不影响操作, 是要把事件委托委托给一个在页面上不动的父元素 var ul = document.querySelector('.box') ul.onclick = function (e) { e = e||
JavaScript 事件委托
往南的博客
09-23 296
原理：给父元素添加事件，子元素触发时冒泡到父元素来捕捉事件，然后通过(方法 / 属性)来判断是哪个子元素触发，再进行对应的事件处理。 $("父元素").click(function($event) { let el = $event.target; // 获取触发事件的具体对象 if (el.nodeName.toLowerCase() == 'a') { // 判断触发事件的标签是不是 a 标签 // 再通过获取触发事件元素的文本来进行精准定位 // .
由JS for 循环中为元素添加点击事件到JS 中的事件委托
热门推荐
远走的兔子博客
07-05 1万+
一 、问题的出现           在web中，我们常常需要为某一类型的元素添加事件，这时，常用for循环。对于刚刚接触不久的小白总是容易在这里犯错，比如我。因此今天在这里记录一下自己的踩过的坑，希望对大家有所帮助。          假如我们需要为页面上的一组按钮添加点击事件。采用for循环，最容易写成如下： html> html lang="en"> head> meta
Vue 87 ，在 VueJS 中使用事件委托处理点击事件（事件委托，vue事件委托，什么是事件委托，什么是vue的事件委托）
最新发布
前端架构师（AI + GIS + Web3D）& 数字芯片系统架构师（FPGA），NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.csdn.net）
08-01 2179
⭐在开发 Vue 项目时，我们经常需要处理大量的点击事件。为每个可点击的元素，单独添加事件监听器，不仅会增加代码的复杂度，还会降低性能。而事件委托是一种有效的优化方式，它可以显著减少事件监听器的数量，提高代码的可维护性和执行效率。这里我们通过实际示例，详细讲解如何在 Vue 项目中使用事件委托。
准确获取事件源的任意父级元素（事件委托）
小丞同学
05-09 2468
事件委托终极奥义！用这种方法可以解决绝大多数由动态创建元素，带来的问题！
获取当前点击的是哪个元素
Giraffe
07-13 1万+
用点击li元素为例 获取当前点击的元素 1 2 3 4 5 //第一种 var doms = document.querySelectorAll('ul li'); for (var i = 0; i < doms.length; i++) { !function(dom,index) { dom
手机端给父元素绑定了长按事件，但是子元素的点击事件不被触发的解决方法——事件委托
cysear的专栏
05-16 3855
今天遇到一个问题，手机端给父元素绑定了长按事件，但是子元素的点击事件不被触发 需要实现的功能 子元素需要点击父元素需要  长按  高亮显示父元素高亮时有自己的点击事件   并且  不触发子元素的点击事件点击其他位置，取消高亮显示 页面展示 代码如下 <meta name="viewport" content="wid
Unity使用委托完成点击事件注册
weixin_44870508的博客
02-23 2514
Unity使用委托完成点击事件注册一、需要创建2个脚本二、具体步骤1.ClickListener1.11.22.UIManager2.1给需要注册监听的物体声明并绑定方法总结 一、需要创建2个脚本 1.ClickListener .cs 2.UIManager.cs 二、具体步骤 1.ClickListener 首先要确定ClickListener中需要干什么！ 1.1 我们需要定义一个委托，这个委托ClickCallBack有两个参数，一个Transform类型，一个object类型，再定义两个私有的全局
事件委托解决JS/jQuery获取不到动态添加的元素节点的问题
weixin_46554760的博客
09-30 2625
通过【事件委托】解决JS/jQuery获取不到动态添加的元素节点的问题 发现问题： 本来想通过name获取动态遍历添加的节点元素，对其使用事件监听（addEventListener）绑定事件；但是发现不论通过js的 document.getElementsByName 还是通过jquery的$(‘name=“node”’) 都获取不到元素节点 插入一个小知识点： 特别误导我的是控制台打印出来是一个空数组 []，但是旁边有一个小箭头点开后又会出现节点会让我误以为获取到了节点；其实是因为点击展开时候又去读了内
事件委托&判断鼠标是否点击到元素外部区域
zhs961120的博客
04-16 3725
此文章讲解的是事件委托的基本概念和原理实现；以及拓展到的常见场景问题“判断鼠标是否点击到元素外部区域”。 一. 事件委托 1.概念 事件流：事件捕获阶段（外至内）–>处于目标阶段（事件响应到触发事件的最底层元素上）–>事件冒泡阶段（内至外，默认false冒泡） 事件委托：将一个元素的绑定事件委托到另一个 元素上 优点：减少内存的消耗、动态绑定事件 2.场景问题 一个ul下有十个li，需要每次点击li标签的时候，打印出被点击的li的innerHTML文本内容，如何做？ 3.代码实现 人们最常见的惯
通过js事件委托给后来添加的元素加点击事件
业余前端的职业经历
06-28 1754
有的元素可以第一次加载的时候并没有存在页面中，可是我们经过一些操作之后追加到dom树上，这个时候我们要是能提前添加上事件就好了。 废话不多说还是，直接拿例子来说事情 // 引入jquery库 方便进行dom操作 需求就是 页面有一个按钮 点击生成一个p元素 然后点击p元素弹出一个hello world 事实上 此时p元素并不在我们的dom树上 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js">&l
html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
qq_36785719的博客
11-19 3344
如果子元素和父元素都有点击事件，会出现点击事件冒泡的情况。 1.如何避免冒泡： html： <html> <head></head> <body> <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo"> 你好, <span style="color:#fff;font-size: 14px " id="login_na
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值