jquer事件委托on绑定事件，this指向问题

最新推荐文章于 2022-04-15 20:12:07 发布
最新推荐文章于 2022-04-15 20:12:07 发布
阅读量2.3k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Zzw981226/article/details/80450503
探讨了在使用Ajax请求并渲染数据时遇到的问题：如何在事件委托中正确获取自定义data属性值。作者尝试为元素绑定data属性，并在此基础上进行事件委托，但因this指向问题无法直接获取到该属性值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

ajax请求回来的数据渲染时我给li绑定了一个data自定义属性，然后再给这个这个li绑定事件委托，事件委托的this指向window，所以没办法拿到触发事件的li的自定义data的属性值，有没有大佬知道怎么解决
Zzw981226
关注
jquery html动态添加的元素绑定事件详解
10-22
然后，我们使用`.on()`方法在`#testdiv`的`<ul>`上绑定了`click`事件，并通过选择器指定只有当`<li>`元素触发点击事件时，才调用`test()`函数，并传递`$(this).attr("name")`作为参数。这样，无论何时添加到这个`...
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
// this指向oUl中触发了click事件并且class为item的子元素 }); ``` 使用事件委托的好处显而易见：首先，它极大地减少了事件监听器的数量，提高了程序性能；其次，它自动适应动态元素的增删，无需重新绑定事件，...
jQuery的事件委托和this、$(this)
weixin_30699831的博客
04-16 622
　　首先什么是事件委托，一般我们设置事件监听的时候都是在需要触发事件的节点上设置。假设一个nav节点下有几十上百个li标签，就算使用循环绑定都是相当耗费内存，使页面速度下降。为了解决这个问题可以使用事件委托，将事件委托给他们共同的父元素节点ul上，通过事件的冒泡将事件传递到点击节点的父节点ul上，从而触发事件。 //需要绑定事件的nav标签 <nav> ...
JS笔记（四）_this指向问题、事件委托、冒泡的理解
C_zhihao的博客
07-03 459
一.this指向 1.普通函数直接调用 var a = 1 function test(){ console.log(this.a) } test() //1 //因为test是直接调用的，没有其他的绑定规则，这里进行了默认绑定，将全局对象绑定this上， //所以this.a 就解析成了全局变量中的a 2.内置函数 function f(){ console.log(this) } setTimeout(f,1000) //window 3 .回调函数 v.
详解JavaScript下的事件委托和this
bailao1的博客
06-24 948
JavaScript不仅门槛低，而且是一门有趣、功能强大和非常重要的语言。各行各业的人发现自己最混乱的选择是JavaSscript编程语言。由于有着各种各样的背景，所以不是每个人都对JavaScript及其基本原理有广泛的认识。通常来书，除非你去参加工作面试才会去思考为什么或者怎么做，否则JavaScript只是你工作的内容。     这个系类的目标是深入探讨JavaScript的一些概念和理论
jquery绑定方法on的
qq_28596151的博客
06-01 524
jquery在1.7以后使用放弃了使用bind方法为元素绑定方法，使用on()绑定方法。我们这里就单单讲解on()绑定方法的使用方式。1、指定元素绑定方法该方法利用jquery提供的选择器方法匹配到指定的元素并为其绑定元素。语法：$(selector).on(type,fun);语法如下：&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&g...
委托事件，事件冒泡，事件捕获，this，target总结
aaa小二
06-02 2999
1，委托事件：依托于事件冒泡原理让自己的父级或祖籍（甚至根元素）来帮自己做某些事情。 优点： A：提高运行效率（尤其对于需要循环操作的列表）； B：动态添加后的元素，仍然可以有这些事件（对比与给自己添加的事件，后续动态添加时，新来的这些元素不会有这些事件） 例子：给列表li添加事件，并保证动态添加的元素都有该事件。 html代码：<ul id="ul"> <li>1</li>
JavaScript中利用jQuery绑定事件的几种方式小结
10-22
- **事件处理函数的上下文**：在jQuery中，事件处理函数的`this`关键字指向触发事件的元素；而在原生JavaScript中，可以通过事件对象的`target`属性来获取。 - **移除事件监听器**：如果需要在适当的时候移除事件...
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
它们允许添加多个事件处理函数，且`this`正确指向事件源。 接下来是事件冒泡和事件捕获，它们是事件在DOM层次结构中传播的两种方式： - 事件冒泡：事件从最具体的节点（事件目标）开始，向上逐级传播到最不具体的...
老生常谈js动态添加事件--- 事件委托
10-21
3. 回调函数的`this`关键字会指向触发事件的元素，因此可以在函数内部通过`this`关键字访问该元素。 需要注意的是，事件委托虽然强大，但也并非没有限制。如果事件处理器绑定了过多的事件，可能会造成性能问题，...
JavaScript事件委托机制与this的比较
Eiwen的博客
04-08 246
　　很多时候我们在完成交互时，页面的一些dom结构是根据后台传输过来的数据动态加载的，如果说我们需要给这些数量比较大的dom结构（比如说表格，或则ul&amp;amp;amp;gt;li）添加click或则hover事件时，手写/遍历生成元素内的onclick函数式不可取的，会大量的消耗浏览器内存，降低程序的性能。所以，采用事件委托机制或this就来替代就显得很有必要了。 一.什么是事件委托机制 简单来说，就是借助e...
jquery和js中的this使用及其非动态绑定的this用法
syl2850246的博客
10-12 737
在jquery中动态绑定事件的时候 在里面可以用this，此时的this指代当前事件源，不过此时的this是js对象，需要加$转化为jq对象才能使用jq里面的方法 在js中动态绑定事件的时候 里面也可以用this指代当前的事件源，此时的this就是当前的js对象 ...
事件对象与事件委托-包含解决在事件中箭头函数的this指向问题
世界和我们都不该止步于此
04-15 1056
目录 一.了解并使用事件对象 二.target与this 三.事件委托（冒泡的极致应用） 四.事件对象中的鼠标事件 一.了解并使用事件对象 什么是事件对象？ 当我们注册一个事件的时候我们会这样写： element.addEventListener('click',()=>{ //执行语句 }，true) 这时我们会发现有一个地方是空着的，没错就是函数参数是空着的，其实在注册事件的时候，这个参数就是事件对象，我们通过事件的触发所获得的数据会存放在这个事件对象中，可以在事.
JQuery中的on事件
DavidZhao的博客
01-31 2081
on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数。   on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.o...
浅谈事件委托和this的用法
hengs_dream的博客
07-30 2505
浅谈事件委托和this用法详解事件委托 事件委托是一种由其它元素而非事件目标元素来响应事件产生的行为的思想。比如用ul元素来处理其子元素li的事件。有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。浏览器以一种特定的工作流程来处理事件，并支持事件捕获和事件冒泡。事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。浏览器会向
jquery 的on方法中this指向触发事件的最底层dom元素
lzf的博客
05-15 3267
参数function中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
js文本框两级联动，及onkeyup和onkeydown的使用。
大道的专栏
07-10 1923
最简单的两级联动 document.getElementById（"1"）.value=document.getElementById（"2"）.value               onkeyup和onkeydown的区别       昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题，文本框里输入的时候要开始计算文本框里面输入了多少字，自然想到了
jquery on事件无效
最新发布
04-25
`on()` 是 jQuery 中用于绑定事件的核心方法之一，尤其适用于动态生成的 DOM 元素。然而，在某些情况下可能会遇到 `on()` 绑定事件无效的情况。以下是可能的原因及其对应的解决方案： #### 1. **目标元素不存在于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值