jQuery中on事件的$(this)和e.target

最新推荐文章于 2022-08-12 23:42:23 发布
最新推荐文章于 2022-08-12 23:42:23 发布
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/webcaorui/blog/1541320
本文通过一个具体的HTML示例，详细介绍了如何使用jQuery的事件委托功能为元素及其子元素绑定事件处理程序。具体演示了当鼠标悬停在列表项上时，如何通过事件冒泡机制来确定目标元素。

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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

当用on给当前多个元素的父元素绑定事件时，

如果当前元素下还有子元素，

$(this)指向当前元素，

而e.target可能会指向当前元素下的子元素；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="ulList">
    <li><a href="">1</a><a href=""></a></li>
    <li><a href="">2</a><a href=""></a></li>
    <li><a href="">3</a><a href=""></a></li>
    <li><a href="">4</a><a href=""></a></li>
</ul>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
   $("#ulList").on("mouseover","li",function(e){
//       console.log(this);
       console.log(e.target);
   })
</script>
</body>
</html>

 

转载于:https://my.oschina.net/webcaorui/blog/1541320

使用jq获取DOM对象的this和event.target
NsbiCs的博客
10-10 352
通过上述方法，你可以方便地获取到当前操作的DOM对象和事件触发的目标DOM对象，从而在使用jq进行DOM操作时更加灵活和便捷。在使用jQuery（简称jq）处理DOM操作时，经常需要获取当前操作的DOM对象以及事件触发的目标DOM对象。关键字时，它将指向当前操作的DOM对象。无论是绑定了点击事件、改变事件还是其他事件，都可以使用。关键字转换为一个jq对象，从而获得当前操作的DOM对象。来获得事件触发的目标DOM对象。同样，可以根据需要对该对象进行进一步的操作。属性，可以获取事件触发的目标DOM对象。
jquery 关于event.target使用的几点说明介绍
10-27
在JavaScript和jQuery中，`event.target` 是一个非常重要的属性，尤其在处理事件时。它表示触发事件的实际DOM元素，即使事件冒泡到其他父元素，`event.target`始终指向最初的源头。这篇文竛建议我们理解并正确使用`...
jquery 的on方法中this指向触发事件的最底层dom元素
lzf的博客
05-15 3267
参数function中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。
jQuery的事件委托和this、$(this)
weixin_30699831的博客
04-16 622
　　首先什么是事件委托，一般我们设置事件监听的时候都是在需要触发事件的节点上设置。假设一个nav节点下有几十上百个li标签，就算使用循环绑定都是相当耗费内存，使页面速度下降。为了解决这个问题可以使用事件委托，将事件委托给他们共同的父元素节点ul上，通过事件的冒泡将事件传递到点击节点的父节点ul上，从而触发事件。 //需要绑定事件的nav标签 <nav> ...
jq 关于this与e.target区别
大洋
06-29 4337
在编写事件函数时可以传入一个event参数，even参数可以使用一个target属性如even.target用以调用，其作用是指向返回事件的目标节点（触发该事件的节点），这与this是有区别的。 在js中事件属性是会冒泡的，所以在这情况下，如果选用this，那么this是随时变化的，它指向的总是当前触发的事件，而even.target则是仅仅指向触发该事件的节点。 举例子说明： ...
jQuery事件处理 on() 绑定事件
vue_ajks的博客
08-12 1448
jQuery事件处理 on() 绑定事件
jQuery中的常用事件总结
10-29
本文将深入探讨jQuery中的几个关键事件处理概念。 首先，`$(document).ready()`是一个非常重要的事件，用于确保当HTML文档加载完成并且DOM（文档对象模型）准备就绪时，执行指定的代码。这不同于`window.onload`...
if (titleWeight == 1) { $(this).css('font-weight', 'bold'); } else { $(this).css('font-weight', 'normal'); } 这个样式没有加上的原因及解决方法
最新发布
07-02
2.使用正确的属性名和值：jQuery中css()方法的第一个参数是CSS属性名，第二个是值。注意属性名可以用驼峰式（如fontWeight）或CSS写法（如font-weight）。值可以是字符串，如"bold"或"700"（引用[4]提到，也可以使用...
// 创建文件项 createFileItem() { this.$item = $(` <div class="file-item"> <div class="d-flex justify-content-between"> <span>${this.file.name}</span> <div class="btn-group"> <button class="btn btn-sm btn-secondary pause">暂停</button> <button class="btn btn-sm btn-danger cancel">取消</button> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%"></div> </div> <div class="status"></div> </div> `); this.$item.find('.pause').click(() => this.togglePause()); this.$item.find('.cancel').click(() => this.cancel()); $('#fileList').append(this.$item); } // 其他辅助方法 prepareChunks() { let offset = 0; while (offset < this.file.size) { this.chunks.push(this.file.slice(offset, offset + this.chunkSize)); offset += this.chunkSize; } } updateProgress() { const progress = (1 - this.missingChunks.length / this.chunks.length) * 100; this.$item.find('.progress-bar').css('width', `${progress}%`); } updateStatus(text) { this.$item.find('.status').text(text); } togglePause() { this.isPaused = !this.isPaused; this.$item.find('.pause').text(this.isPaused ? '继续' : '暂停'); if (!this.isPaused) this.uploadChunks(); } cancel() { this.isPaused = true; if (this.xhr) this.xhr.abort(); this.$item.remove(); } } // 初始化拖放功能 $(function() { const $dropZone = $('#dropZone'); const $fileInput = $('#fileInput'); // 拖放事件处理 $dropZone.on('dragover', e => { e.preventDefault(); $dropZone.addClass('dragover'); }).on('dragleave drop', e => { e.preventDefault(); $dropZone.removeClass('dragover'); }).on('drop', e => { handleFiles(e.originalEvent.dataTransfer.files); }); // 文件选择处理 $fileInput.change(e => handleFiles(e.target.files)); }); function handleFiles(files) { Array.from(files).forEach(file => { new ChunkedUploader(file); });帮我注释一下我要学习参考的
03-09
他们可能想了解如何用jQuery和ES6语法来构建这个功能，以及如何管理上传过程中的暂停、取消和进度更新。 首先，我会从createFileItem方法开始。这个方法创建了一个文件项的DOM结构，包含文件名、按钮组、进度条和...
jQuery中阻止冒泡事件的方法介绍
10-26
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它指的是事件从最深的节点开始，沿着DOM树向上级节点传播，直到到达根节点的过程。这种机制使得事件可以在多个层次的元素上触发，允许我们对同一事件进行多次...
jQuery-on()给动态生成元素绑定事件
ab_er的博客
07-14 1765
jQuery事件处理 on()绑定事件
this.target与this的区别及$(this.target)与$(this)比较结果的问题e
qq_27892551的博客
06-24 3392
1.event.target与this的区别   event.target表示发生点击事件的元素；   this表示的是注册点击事件的元素    this 等于 e.currentTarget    this是所有函数原生具有的.进入函数时,this已经直接有了目标对象.   而e.target通过e再寻找target,中转了一下。所以相比较而言，this的执行效率更高些。 2 $
jQuery中的$(this)的使用
yaojxing的博客
06-22 908
jQuery中的$(this)解析
e.target与事件委托简例（原生和jQuery的区别）
angjudang4440的博客
09-04 348
target定义（英译：目标，目的）： 　　　　target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法： 　　　　event.target 　　　　event.target.nodeName 　　//获取事件触发元素标签name（li,p...） 　　　　event.target.id　　　　　　　//获取事件触发元素id ...
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...
使用jq获取input中$(this).val()获取到on_九.JQ的方法
weixin_39755136的博客
12-05 931
1.显示: show() a.$(this).show() b.$(this).show(time,function(){}) time:从隐藏到显示所需要的时间(单位为毫秒),默认为0 function(){}:回调方法2.隐藏 :hide() a.$(this).hide() b.$(this).hide(time,function(){}) time:从显示到隐藏所需要的时间(单位为...
JQuery中的on绑定事件函数解析
qq_41606120的博客
03-09 428
JS和JQuery绑定事件函数 不同于JS的原生绑定函数addEventListener，JQuery中的绑定函数如下： on(events,[selector],[data],fn) 我们来分析每个参数的含义。（这里可以参考JQuery文档） events表示事件名，比如“click”，这很好理解 selector文档说的很绕，但实际上这个并不重要，很少用到，而且省略也毫无影响。 重点在于data和fn。 fn表示处理函数，也很好理解。有时候它会携带一个或几个参数。 data就有点难理解了，文档说的是
今日学习打卡——jQuery之事件委托的疑惑
m0_48385518的博客
02-08 455
今天写案例时，对动态生成的li绑定事件用到了事件委托，但是发现自己对事件委托理解的不是很到位，js代码如下 $("ul").on("click", "a", function () { $(this).parent().remove(); }) 这个案例中，li是动态生成的，li里边有一个a标签，通过点击a中的删除，就可以把他的父元素li删掉，我还在纠结怎么找到对应的li，因为我以为$(this)指向的是ul，但是如js代码所示，$(this)指向的是当前的a，然后直接删除他的父元素就行了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值