如何撤消addEventListener？

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时鼠标离开元件事件发生.