如何连锁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");
});这样做会产生一个错误：
未定义的TypeError:无法读取未定义的属性“addEventListener”
回答 3
Stack Overflow用户
发布于 2017-04-29 11:30:07
链接addEventListener是不可能的，因为该方法不返回任何内容(实际上它确实返回undefined)。规格说明将其指定为：
接口EventTarget {(在DOMString类型中，在EventListener侦听器中，在布尔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');
});但是，干扰内置原型是经常被建议反对的东西，因为它可能会产生不必要的副作用。
Stack Overflow用户
发布于 2018-01-02 21:53:55
这是我在项目中使用的一个基本事件链接函数。这并不花哨，但它允许链接事件并使用单个函数来处理所有事件类型(如果需要)。
基本的html为MouseMove类型添加了事件处理程序，但应该适用于其他事件类型。
为了链接事件，您的函数需要在结束时有一个“返回”，返回到调用的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;
}
}
}Stack Overflow用户
发布于 2017-04-29 11:30:19
EventTarget.addEventListener()不返回对其调用的对象，这意味着它不能被链接。
因此，您必须使用某种包装，这样做，例如使用JQuery.on()
$('.mySelector')
.on("mouseover",function() {...})
.on("mouseout",function() {...})https://stackoverflow.com/questions/43695014
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号