Question

我有以下代码：

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");
});

这样做会产生错误：

未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;的未定义

Answer 1

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

 interface EventTarget {
  void               addEventListener(in DOMString type, 
                                      in EventListener listener, 
                                      in boolean useCapture);

当然，您可以使用自己的实现替换addEventListener：

EventTarget.prototype.addEventListener = (() => {
  const addEventListener = EventTarget.prototype.addEventListener;
  return function() {
    addEventListener.apply(this, arguments);
    return this;
  };
})();

document.querySelector('button').addEventListener('hover', () => {
   console.log('hover');
}).addEventListener('click', () => {
   console.log('click');
});

但是对于内置原型的混乱是经常被建议的，因为它可能会产生不必要的副作用。

Answer 2

EventTarget.addEventListener()不返回它被调用的对象，这意味着它不能被链接。

所以你必须使用某种包装器才能做到这一点，例如使用JQuery.on()：

$('.mySelector')
 .on("mouseover",function() {...})
 .on("mouseout",function() {...})

Answer 3

这是我用于项目的基本事件链接功能。它并不花哨，但它允许链接事件并使用单个函数来处理所有事件类型（如果需要）。

基本html为MouseMove类型添加事件处理程序，但应该适用于其他事件类型。

对于链接事件，您的功能需要有一个＆＃34; return＆＃34;最后将返回到调用eventHandler并链接到列表中的下一个函数。

<body>
        <div id="canvas" onmousemove="eventHandler(event)"></div>
</body>

// Call to add event handler to chain
addEventHandler(eventHandler1);

// Call to remove event handler from chain
removeEventHandler(eventHandler1);


var mMoveEventList = new Array();

function addEventHandler(eventHandler) {
    mMoveEventList.push(eventHandler);
}

function removeEventHandler(eventHandler) {
    mMoveEventList.splice(mMoveEventList.indexOf(eventHandler));
}

function eventHandler1(e) {
    console.log("EventHandler1")
    return;  // REQUIRED TO RETURN TO EVENTHANDLER
}

function eventHandler2(e) {
    console.log("EventHandler2")
    return;  // REQUIRED TO RETURN TO EVENTHANDLER 
}

function eventHandler(e) {
    switch (e.type) {
        case "mousemove":
            console.log("mouseMoveEvent");

            if (mMoveEventList.length > 0) {
                for (let i = 0; i < mMoveEventList.length; index++) {
                    mMoveEventList[i]();
                }
            }
            break;
        default:
            # Other event types can be added here
            console.log("Event:", e.type);
            break;
        }
    }
}

如何链接addEventListener？

3 个答案: