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

Posted 2023-02-22

【中文标题】Javascript - 事件处理程序中的箭头函数？

【英文标题】：Javascript - arrow functions this in event handler?

【发布时间】：2016-08-23 06:56:10

【问题描述】：

我是 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');
        );

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

【参考方案1】：

使用箭头函数作为回调，而不是使用this来获取处理程序绑定的元素，您应该使用event.currentTarget。 箭头函数内this 的值取决于箭头函数的定义位置，而不是使用位置。所以从现在开始，请记住那 event.currentTarget 总是指 DOM 当前正在处理其事件监听器的元素。

---

.currentTarget 与 .target

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

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

From the documentation:

currentTarget 类型为EventTarget，只读用于表示 EventTarget 其EventListeners 当前正在处理中。这 在捕获和冒泡期间特别有用。

检查基本示例在下面的sn-p

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>

【参考方案2】：

你不会的。

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

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

【参考方案3】：

即使在箭头函数内部，您也可以使用$(event.target) 代替$(this)。箭头函数保留了定义它们的范围的this。在您的情况下，它是undefined。

【参考方案4】：

箭头函数和这个选择器？

箭头函数从封闭上下文中保留this。 例如。

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

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

您已经可以 - 要访问事件目标，您可以使用 $(e.target) 之类的东西，但要注意冒泡。所以我建议使用普通函数作为回调。