如何撤消添加事件侦听器?

Question

我想创建一个效果，如果我将鼠标悬停在某个元素上，段落元素将逐渐显示，反之亦然(如果光标不再悬停在元素上，则段落应逐渐淡出(。我已经使用纯 CSS 创建了效果，但它有点麻烦，只有当段落是我悬停的元素的直接子级时，它才会起作用(这使得它更加麻烦(。但这是我使用 CSS 创建的方式：

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: transparent;
background-color: transparent;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}
#divForhover {
height: 33.5em;
width: 100rem;
position: absolute;
z-index: 3;
}
#divForhover:hover #welcome {
transition: background-color color linear;
color: white;
background-color: black;
transition-duration: 1s;
}

<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>

但是我刚刚了解到，你可以用JavaScript做同样的事情，它会简单得多：

addEventListner('mouseover', function(evt) {
document.body.querySelector( /*ID_of_the_element*/ ).style.property = 'value';
})

问题是我只知道如何在用户将鼠标悬停在元素上时显示段落，仅此而已。如果光标不再位于元素上，则仍会显示该段落。我不知道如何撤消addEventListener.我试图用removeEventListener来做到这一点，但显然我的语法是错误的。请告诉我该怎么做。

这是带有JavaScript的版本：

document.querySelector("#welcome").style.visibility = "hidden";
var imgOne = document.body.querySelector("#CheiftianOne");
imgOne.addEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "visible";
});
imgOne.removeEventListener('mouseover', function(evt) {
var textBox = document.querySelector("#welcome");
textBox.style.visibility = "hidden";
});

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
overflow: hidden;
}
.FlexContainerRow {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1;
}
.FlixItem_Images {
width: 50rem;
}
#CheiftianTwo {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#welcome {
position: absolute;
z-index: 2;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
text-align: center;
transition: background-color color linear;
transition-duration: 1s;
color: white;
background-color: black;
margin-left: 13.75em;
margin-top: 6.4em;
padding: 0.2em;
border-radius: 0.4em;
}
#divForLayers {
position: absolute;
z-index: 1;
}

<header>
<div id="divForhover">
<div id="divForLayers">
<div id="HeaderImagesContainer" class="FlexContainerRow">
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianOne" />
</div>
<div>
<img src="https://www.nexusindustrialmemory.com/wp-content/uploads/2017/04/OriginalTank.jpg" class="FlixItem_Images" id="CheiftianTwo" />
</div>
</div>
</div>
<p id="welcome">Welcome to te Cheftian Mk.2 Main Battle Tank guide!</p>
</div>
</header>
<nav></nav>
<footer></footer>

Answer 1

将事件处理程序函数分配给变量，或为其指定一个正确的名称。然后添加和删除它。

removeEventListener调用失败，因为您正在向其传递一个唯一的函数。

此外，您实际上不想撤消事件侦听器来实现所需的效果。相反，请收听单独的事件：mouseover和mouseout。例如：

var btn = document.getElementById('btn');
var par = document.getElementById('par');
btn.addEventListener('mouseover', function (e) {
par.style.visibility = 'visible';
});
btn.addEventListener('mouseout', function (e) {
par.style.visibility = 'hidden';
});

<button id="btn">Hover over me</button>
<p id="par" style="visibility: hidden;">This shows when hovering over the button</p>

当鼠标悬停在元素上时，会发生mouseover事件，相反，当鼠标离开元素时，会发生mouseout事件。

Answer 2

当你调用removeEventListener时，你必须传递给它与你传递给addEventListener相同的函数，而不是一个不同但等价的函数。这永远不会删除侦听器：

imgOne.removeEventListener('mouseover', function (evt) { /* ... */ });

。因为根据定义，以前从未添加过确切的功能。

记住添加时使用的那个，并在删除时使用相同的那个。

另外：添加处理程序然后立即删除它没有多大意义。在代码中对addEventListener和removeEventListener的调用之间，不会发生任何触发处理程序的情况。(编辑：啊，Rossipedia已经知道你为什么这样做，他的回答告诉你想这样做。

Answer 3

谢谢大家。我想出了如何在没有removeEventListener的情况下做到这一点。(我使用了两个addEventListener(。

再次感谢！