javascript - 如何链接addEventListener？

我有以下代码:

document.querySelector('.mySelector').addEventListener("mouseover", function() {
    this.parentNode.parentNode.classList.add("over");
});
document.querySelector('.mySelector').addEventListener("mouseout", function(){
    this.parentNode.parentNode.classList.remove("over");
});

鉴于这两个事件在同一个目标上，有没有办法将两个类似的 addEventListener 方法链接起来？ :

document.querySelector('.mySelector').addEventListener("mouseover", function() {
    this.parentNode.parentNode.classList.add("over");
}).addEventListener("mouseout", function(){
    this.parentNode.parentNode.classList.remove("over");
});

这样做会产生错误:

最佳答案

链接 addEventListener 是不可能的，因为该方法不返回任何内容(它实际上确实返回 undefined )。 specification 将其指定为:

当然，您可以将 addEventListener 替换为您自己的实现:

// Enhance the "addEventListener" method
EventTarget.prototype.addEventListener = (addEventListener => (...args) => {
  addEventListener.apply(this, args)
  return this
})(EventTarget.prototype.addEventListener)


// chained events binding
window
  .addEventListener('mouseup'  , e => console.log(e.type))
  .addEventListener('mousedown', e => console.log(e.type))

但是经常建议不要使用内置原型(prototype)，因为它可能会产生不必要的副作用。

关于javascript - 如何链接addEventListener？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43695014/

addeventListener

javascript - 如何链接addEventListener？