为什么将其用作对addEventListener回调中要附加到的元素的引用无效？

问题描述

我有一段JavaScript代码，这些代码选择了具有可编辑类的一堆节点，然后循环遍历它们，在每个节点上添加了一个eventListener：

  var elements = document.querySelectorAll('.editable');
  for (const element of elements) {
     element.addEventListener('mouSEOver',() => {
        element.innerHTML += '<i class="far fa-edit"></i>'
    })
  }

这段代码可以正常工作，并将<i class="far fa-edit"></i>附加在“鼠标悬停”的元素上。

但是，如果我将evenlistener的回调函数替换为：

() => { this.innerHTML += '<i class="far fa-edit"></i>' }

我发现这很奇怪，就像我在console.log this或element上获得相同节点的引用一样！据我了解，this是对调用函数的对象的引用。在这种情况下，element可以同时使用this或element……

为什么此代码的两个版本中只有一个起作用？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

callback javascript this