javascript - 如何撤消 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 事件在鼠标离开该元素时发生。