Javascript - 箭头在事件处理程序中发挥作用? [英] Javascript - arrow functions this in event handler?
问题描述
我是 ES6 的新手,无法让它正常工作:
$(this)
在点击时返回 undefined?
dom.videoLinks.click((e) => {e.preventDefault();console.log($(this));var self = $(this),url = self.attr(configuration.attribute);eventHandlers.showVideo(url);//停用任何活动的视频缩略图dom.videoLinks.filter('.video-selected').removeClass('video-selected');//激活选定的视频缩略图self.addClass('视频选择');});
但是,如果我改变它而不是像这样的箭头功能,它会按预期工作吗?:
dom.videoLinks.click(function(e) {e.preventDefault();控制台日志(这个);console.log($(this));var self = e.this,url = self.attr(configuration.attribute);eventHandlers.showVideo(url);//停用任何活动的视频缩略图dom.videoLinks.filter('.video-selected').removeClass('video-selected');//激活选定的视频缩略图self.addClass('视频选择');});
如果我在回调中使用箭头函数,我将如何处理?
使用箭头函数作为回调,而不是使用this
来获取处理程序所指向的元素已绑定,您应该使用 event.currentTarget
.this
在箭头函数中的值取决于箭头函数的定义位置,而不是使用位置.
所以从现在开始请记住,event.currentTarget
总是指 DOM
当前正在处理其事件监听器的元素.
.currentTarget 与 .target
使用 event.currentTarget
而不是 event.target
因为事件冒泡/捕获:
event.currentTarget
- 是附加了事件侦听器的元素.event.target
- 是触发事件的元素.
currentTarget
类型 EventTarget
, readonly 用于指示EventTarget
当前正在处理其 EventListeners
.这个在捕获和冒泡期间特别有用.
检查下面代码段
中的基本示例var parent = document.getElementById('parent');parent.addEventListener('click', function(e) {document.getElementById('msg').innerHTML = "this:" + this.id +"<br> currentTarget: " + e.currentTarget.id +"<br>目标:" + e.target.id;});$('#parent').on('click', function(e) {$('#jQmsg').html("*jQuery<br>this:" + $(this).prop('id')+ "<br>currenTarget: " + $(e.currentTarget).prop('id')+ "<br>目标:" + $(e.target).prop('id'));});$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));代码>
#parent {background-color:red;宽度:250px;高度:220px;}#child {background-color:yellow;height:120px;width:120px;margin:0 auto;}#grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;}#msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="parent">Parent-(附加事件处理程序)<br><br><div id="孩子">儿童<br><br><p id="grand-child">孙子</p>
<div id="msg"></div><br><div id="jQmsg"></div><br><div id="arrmsg"></div>
I'm new to ES6, and can't quite get this to work:
$(this)
returns undefined on click?
dom.videoLinks.click((e) => {
e.preventDefault();
console.log($(this));
var self = $(this),
url = self.attr(configuration.attribute);
eventHandlers.showVideo(url);
// Deactivate any active video thumbs
dom.videoLinks.filter('.video-selected').removeClass('video-selected');
// Activate selected video thumb
self.addClass('video-selected');
});
However if I change it so not be an arrow function like so, it works as expected?:
dom.videoLinks.click(function(e) {
e.preventDefault();
console.log(this);
console.log($(this));
var self = e.this,
url = self.attr(configuration.attribute);
eventHandlers.showVideo(url);
// Deactivate any active video thumbs
dom.videoLinks.filter('.video-selected').removeClass('video-selected');
// Activate selected video thumb
self.addClass('video-selected');
});
So how would I go about it if I use an arrow function in the callback?
With arrow function as a callback, instead of using this
to get the element to which the handler is bound, you should use event.currentTarget
.
Value of this
inside an arrow function is determined by where the arrow function is defined, not where it is used.
So from now on, keep in mind that
event.currentTarget
always refers to the DOM
element whose EventListeners are currently being processed.
.currentTarget vs .target
Use event.currentTarget
instead of event.target
because of event bubbling/capturing:
event.currentTarget
- is the element that has the event listener attached to.event.target
- is the element that triggered the event.
currentTarget
of typeEventTarget
, readonly Used to indicate theEventTarget
whoseEventListeners
are currently being processed. This is particularly useful during capturing and bubbling.
Check the basic example in the below snippet
var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
document.getElementById('msg').innerHTML = "this: " + this.id +
"<br> currentTarget: " + e.currentTarget.id +
"<br>target: " + e.target.id;
});
$('#parent').on('click', function(e) {
$('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
+ "<br>currenTarget: " + $(e.currentTarget).prop('id')
+ "<br>target: " + $(e.target).prop('id'));
});
$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));
#parent {background-color:red; width:250px; height:220px;}
#child {background-color:yellow;height:120px;width:120px;margin:0 auto;}
#grand-child {background-color:blue;height:50px;width:50px;margin:0 auto;}
#msg, #jQmsg, #arrmsg {font-size:16px;font-weight:600;background-color:#eee;font-family:sans-serif;color:navy;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Parent-(attached event handler)<br><br>
<div id="child"> Child<br><br>
<p id="grand-child">Grand Child</p>
</div>
</div>
<div id="msg"></div><br>
<div id="jQmsg"></div><br>
<div id="arrmsg"></div>
这篇关于Javascript - 箭头在事件处理程序中发挥作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!