Question

这是我的代码：

var element = document.createElement('div');
element.style.height = "100px"
element.style.width = "100px";
element.style.backgroundColor = "red";
var body = document.getElementsByTagName('body')[0];
body.appendChild(element);

function hov() {
  element.style.backgroundColor = "blue";
}
element.addEventListener('mouseover', hov);
element.removeEventListener('mouseout', hov);

如您所见，我创建了具有红色背景颜色的div元素。 AddEventListener工作正常，背景颜色更改为蓝色，但为什么removeEventListener不起作用？为什么div仍然是蓝色的？

Answer 1

您需要创建一个函数将颜色恢复为红色：

function hovOut() { 
    element.style.backgroundColor = "red"; 
} 
element.addEventListener('mouseout', hovOut);

Answer 2

您删除了事件监听器，这意味着，div不会再听取任何“悬停”事件。所以你需要添加另一个函数（除了removeeventlistener）根据条件改变颜色

Answer 3

关于事件的事情一旦被解雇就完成了它的工作。删除事件列表器并不会取消响应它所做的事情（你的情况是hov函数）

发生的事情是： 1.发出的事件 - ＆gt;功能hov发挥了作用 2.删除听众 - ＆gt;代码停止等待mouseout事件

没有定义此类mouseout事件

解决方法：

function removeHov(){
   element.style.backgroundColor = "red";
}
element.addEventListener('mouseout', removeHov);

Answer 4

您没有成功删除事件侦听器，即使您这样做了，div的颜色也已更改。它的颜色不会因为你分离事件而改变。相反，您需要明确更改颜色。

如何使用removeEventListener来禁用addEventListener？

4 个答案: