Javascript - 箭头函数在事件处理程序中？

Question

我是 ES6 的新手，不能完全让它工作:

$(this) 在点击时返回未定义？

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');
        });

但是，如果我改变它而不是像这样的箭头函数，它会按预期工作吗？:

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');
        });

那么，如果我在回调中使用箭头函数，我该如何处理呢？

Answer 1

使用箭头函数 作为回调，而不是使用this 来获取处理程序绑定(bind)到的元素，您应该使用event.currentTarget.
箭头函数中 this 的值取决于箭头函数的定义位置，而不是它使用的位置。
所以从现在，请记住event.currentTarget 始终引用 DOM 当前正在处理其 EventListener 的元素。

---

.currentTarget 与 .target

使用 event.currentTarget 而不是 event.target 因为事件冒泡/捕获:

• event.currentTarget - 是附加了事件监听器的元素。
• event.target - 是触发事件的元素。
  

From the documentation:

currentTarget of type EventTarget, readonly Used to indicate the EventTarget whose EventListeners are currently being processed. This is particularly useful during capturing and bubbling.

检查下面代码段

中的基本示例

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>