es6 addeventlistener - 无法读取未定义的属性'classList'

Question

我有一个addEventListener箭头函数，点击一个按钮，它通过切换一个类来改变颜色。如下所示：

var clickButton = document.getElementById("clicker");

clickButton.addEventListener("click", => () {
  this.classList.toggle("modified");
}, false);

在我的控制台中：

  

未捕获的TypeError：无法读取未定义的属性“classList”       在HTMLButtonElement。

它变得有趣的是将它转换为如下的立场JS函数：

var clickButton = document.getElementById("clicker");

clickButton.addEventListener("click", function() {
  this.classList.toggle("modified");
});

完美无缺。我不明白为什么arrow函数版本渲染classList undefined。

classList如何在ES6箭头功能中起作用？

Answer 1

此上下文中的箭头函数不会将this绑定到元素，它是词法绑定的。结果是箭头函数示例，因为this没有绑定到clicker元素，这就是箭头函数不起作用的原因，但是常规函数却没有。

https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

http://wesbos.com/arrow-function-no-no/

Answer 2

解决方法的一种方法＆＃34;这是使用S1而不是Ori Dori的评论

W{1}= {}
W{2}= {O1,O2,O3,O4}
W{3}= {O1,O3}
W{4}= {O1,O2,O3,O4}
W{5}= {O1,O2,O3,O4}

由Wesbos

引用

  

使用currentTarget而不是target，因为如果有，可以更改目标   嵌套元素，如链接内的跨度

Answer 3

使用如下所示的事件目标

 var clickButton = document.getElementById("clicker");
 clickButton.addEventListener('click', (e)=>{
     e.target.classList.toggle("modified") 
 });