event.currentTarget与event.target的差别介绍

event.currentTarget与event.target的差别想大家在使用的时候不是非常在意。本文以測试代码来解说它门之间的不同。即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不专业,好拗口啊,还是直接上測试代码吧:

<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$(‘#wrapper‘).click(function(e) {
console.log(‘#wrapper‘);
console.log(e.currentTarget);
console.log(e.target);
});
$(‘#inner‘).click(function(e) {
console.log(‘#inner‘);
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上測试输出例如以下:
当点击click here!时click会向上冒泡,输出例如以下:
#inner
<a href=?"#" id=?"inner">?click here!?</a>?
<a href=?"#" id=?"inner">?click here!?</a>?
#wrapper
<div id=?"wrapper">?…?</div>?
<a href=?"#" id=?"inner">?click here!?</a>?
*/
</script>
时间: 2024-11-06 16:47:10

event.currentTarget与event.target的差别介绍的相关文章

event.currentTarget与event.target的区别介绍

event.currentTarget与event.target的区别想大家在使用的时候不是很在意,本文以测试代码来讲解它门之间的不同.即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素.翻译的不专业,好拗口啊,还是直接上测试代码吧: <div id="wrapper"> <a href="#" id="inner">click here!</a>

event.currentTarget与event.target

无意中在一段源码里看到event.currentTarget这个属性,这个与熟悉的event.target还是有所差别的. event.target是指事件发生的源,在哪个元素上发生的.event.currentTarget 就是通过addEventListener绑定的DOM元素.事件是可以通过冒泡进行传递的.通过冒泡触发的事件event.target 跟event.currentTarget是不相同的元素. 引用网上的一段英文:Event objects also have target p

event.target和event.currentTarget的区别

target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT"> <li class="item1">fsda</li> <li class="item2">ewre</li> <li class="item3">qewe</li&g

Event对象中的target属性和currentTarget属性的区别

先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在<body>和<button>上都绑定了click事件) 1 <body onclick="mouseEvent1()"> 2 <button onclick="mouseEvent2()">点我</button&g

JS:event对象下的target属性和取消冒泡事件

1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = function(){  alert(123);//123 } event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标; //W3C下 document.onclick = function(evt){ var e = evt

Javascript中event.srcElement和event.target的区别

event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD","TR","A"等.所以把看过的一些抄下来,不记得的时候再来看看. <script type="text/javascript">    function tdclick(){        if(event.srcElement.tagNam

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

1.滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 2.解决方案 解决办法1: 在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为. elem.addEven

移动端报错: Unable to preventDefault inside passive event listener due to target being treated as passive的解决方案

在做react移动端项目的时候,连续点击底部导航,浏览器就会报Unable to preventDefault inside passive event listener due to target being treated as passive的错: 解决方案: 给html加上CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发. html { font-size: 6.666667vw; overflow-x: hidde

event.currentTarget

https://api.jquery.com/event.currentTarget/ event.currentTargetReturns: Element Description: The current DOM element within the event bubbling phase. version added: 1.3event.currentTarget This property will typically be equal to the this of the funct