细说event.currentTarget & event.target的不同使用

最新推荐文章于 2022-05-11 21:07:26 发布

weixin_33705053

最新推荐文章于 2022-05-11 21:07:26 发布

阅读量232

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011352518

版权

dom event简介

Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。事件添加有以下几个方法：

EventTarget.addEventListener
注意: Internet Explorer 6-8 并不支持这个方法，而是提供了类似的 element.attachEvent API 。如果要进行跨浏览器使用，请考虑使用有效的JavaScript 库。
html的属性添加 <button οnclick="alert('Hello world!')">
myButton.onclick = function(event){alert('Hello world');};

事件添加目标就是EventTarget,也是注册事件的监听者。有的时候注册事件的监听者并不是事件的触发者，实际事件的触发者是event.target，

EventTarget事件目标

EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。

Element，document 和 window 是最常见的事件目标，但是其他对象也可以是事件目标，比如XMLHttpRequest，AudioNode，AudioContext 等等。EventTarget实例主要需要实现下面三个方法：

EventTarget.addEventListener()
在EventTarget上注册特定事件类型的事件处理程序。
EventTarget.removeEventListener()
EventTarget中删除事件侦听器。
EventTarget.dispatchEvent()
将事件分派到此EventTarget。

不少情况下，EventTarget就是注册的事件的监听者；

event实例

有许多类型的事件，其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。在添加注册事件的时候，事件响应一般是一个函数，而函数的第一个参数就是event，一个真实的事件对象的打印如下：

altKey:false
bubbles:true
button:0
buttons:0
cancelBubble:false
cancelable:true
clientX:30
clientY:62
composed:true
ctrlKey:false
currentTarget:button#myBtn
defaultPrevented:false
detail:1
eventPhase:0
fromElement:null
isTrusted:true
layerX:30
layerY:62
metaKey:false
movementX:0
movementY:0
offsetX:20
offsetY:6
pageX:30
pageY:62
path:(5) [button#myBtn, body, html, document, Window]
relatedTarget:null
returnValue:true
screenX:2377
screenY:320
shiftKey:false
sourceCapabilities:InputDeviceCapabilities {firesTouchEvents: false}
srcElement:button#myBtn
target:button#myBtn
timeStamp:658.445
toElement:button#myBtn
type:"click"
view:Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which:1
x:30
y:62
__proto__:MouseEvent

通过查看w3c给出的event flow【https://www.w3.org/TR/DOM-Lev...】可以发现，由于事件捕获和事件冒泡的存在，很多时候注册的事件监听者【event.currentTarget】并不是事件的触发者【event.target】，大部分时候事件可能是由子元素触发的，但是在捕获、冒泡的过程中被父级元素的事件监听器获取到了，注册监听事件的父级元素就是这种情况下event.currentTarget，而事件触发者也就是子元素就是event.target；

文字说来总是同步；可以看实例：

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function displayDate1(e)
                   {
                      console.log('按钮注册点击事件');
                      console.log(e.currentTarget);
                      console.log(e.target);
                   }
                );
    document.body.addEventListener("click", function displayDate1(e)
                   {
                      console.log('body注册点击事件');
                      console.log(e.currentTarget);
                      console.log(e.target);
                   }
               );
</script>
</body>
</html>

可以看到输出如下：
图片描述
具体的说就是event.currentTarget是注册事件时所指向的元素，而event.target是响应事件的最小子元素，也就是最深层级的触发事件的元素，需要开发者合理使用。
可以分情况使用：

event.currentTarget在注册事件时如果希望获取事件监听者的相关属性数据而不是出发事件的子元素的一些属性或者数据的话，可以使用。
event.target适合监听者是自身的时候，所以很多可点击的元素都没有孩子元素。

注意：很多时候我们需要做区域点击响应，这样的话需要注意你点击时需要操作的数据，因为触发事件的元素是不确定的，但是可以考虑把数据放在监听者的属性中，这样使用event.currentTarget来获取诗句就是可靠地行为

weixin_33705053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
细说event.currentTarget & event.target的不同使用

dom event简介Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。事件添加有以下几个方法：EventTarget.addEventListener注意: Internet Explorer 6-8 并不支持这个方法，而是...
复制链接

扫一扫