Javascript - 箭头在事件处理程序中起作用吗？

Question

我是ES6的新手,并且无法完成这项工作:

$(this) 单击时返回undefined？

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获取处理程序绑定到的元素,您应该使用event.currentTarget.箭头函数内部的
值this取决于定义箭头函数的位置,而不是使用箭头函数的位置.
因此,从现在开始,请记住, event.currentTarget 始终引用 当前正在处理其EventListeners 的DOM 元素.

.currentTarget vs .target

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

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

从文档:

currentTarget型的EventTarget,只读的用于指示 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>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>

Answer 2

你不会.

更改值this是使用箭头功能的主要要点.

如果你不想这样做那么箭头功能是错误的工具.