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

使用 arrow function 作为回调，而不是使用

this

来获取处理程序绑定到的元素，您应该使用

event.currentTarget

。
箭头函数内

this

的值取决于箭头函数定义的位置，而不是使用的位置。
所以从现在开始，请记住

event.currentTarget

始终指当前正在处理其事件监听器的

DOM

元素。

---

.currentTarget 与 .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

的值是使用箭头函数的要点。

如果您不想这样做，那么箭头函数是不合适的工具。

Answer 3

即使在箭头函数内部，您也可以使用

$(event.target)

代替

$(this)

。箭头函数保留了定义它们的范围。在你的情况下，它是

this

。

Answer 4

箭头功能和这个选择器？

箭头函数将

undefined

保留在封闭的上下文中。 例如。

this

那么如果我在回调中使用箭头函数该怎么办呢？

您已经可以 - 要访问事件目标，您可以使用类似

obj.method = function(){
    console.log(this);
    $('a').click(e=>{
            console.log(this);
    })
};
obj.method(); // logs obj
$('a').click(); // logs obj

的内容，但要注意冒泡。所以我建议使用普通函数作为回调。

Answer 5

$(e.target)

的处理也有所不同。

简而言之，使用箭头函数，没有 this 的绑定。

在常规函数中，

this

关键字表示称为函数的对象，可以是窗口、文档、按钮或其他任何东西。

在箭头函数中，

this

关键字始终表示定义箭头函数的对象。

要获取调用箭头函数的对象，必须使用

this

而不是

event.currentTarget

。您将

this

定义为您案例中的参数

event

。