为何addEventListener绑定Element.remove时移除<button>而非<li>？

问题代码 #

JavaScript

$lis = document.getElementsByTagName('li');

for (let i = 0; i < $lis.length; i++) {
  $li = $lis[i];
  $span = $li.getElementsByTagName('span')[0];
  $button = $li.getElementsByTagName('button')[0];

  $button.addEventListener('click', $li.remove);
}

HTML

<ul>
  <li>
    <span>1</span>
    <button>x</button>
  </li>
</ul>

核心原因：函数的this绑定与方法调用规则 #

• 当你写$li.remove时，只是拿到了Element.prototype.remove这个方法的引用，并没有把它和$li绑定在一起——这个方法本身不会记住自己原本属于哪个元素。
• DOM事件监听的回调函数，默认会把this指向触发事件的元素，也就是你点击的<button>。
• Element.remove()方法的作用是移除调用它的元素（即this指向的元素）。所以按钮点击事件触发时，相当于执行了button.remove()，自然就把按钮自己删掉了。

补充：为什么匿名函数能解决？ #

如果用() => $li.remove()包裹，箭头函数的this继承自外层循环的作用域，始终指向当前的$li，此时调用$li.remove()时，方法的执行上下文是$li，所以会正确删除对应的<li>元素。你也可以用$li.remove.bind($li)显式绑定this到$li，效果一致。

内容的提问来源于stack exchange，提问作者devope