只有三个事件听众

Question

我试图在鼠标悬停后更改每个 div 元素的大小。鼠标移出后我需要它们返回原始大小。单击每个 div 元素后，我希望它们消失。我相信所有这些都在发挥作用。我遇到的问题是我觉得我不需要15个事件监听器。有没有办法可以使用三个事件监听器？

＆＃13;

＆＃13;

var oneRef = document.getElementById("one");
oneRef.addEventListener('mouseover', bigger);
oneRef.addEventListener('mouseout', smaller);
oneRef.removeEventListener("click", remove);

var oneRef = document.getElementById("two");
oneRef.addEventListener('mouseover', bigger);
oneRef.addEventListener('mouseout', smaller);
oneRef.removeEventListener("click", remove);

var oneRef = document.getElementById("three");
oneRef.addEventListener('mouseover', bigger);
oneRef.addEventListener('mouseout', smaller);
oneRef.removeEventListener("click", remove);

var oneRef = document.getElementById("four");
oneRef.addEventListener('mouseover', bigger);
oneRef.addEventListener('mouseout', smaller);
oneRef.removeEventListener("click", remove);

var oneRef = document.getElementById("five");
oneRef.addEventListener('mouseover', bigger);
oneRef.addEventListener('mouseout', smaller);
oneRef.removeEventListener("click", remove);



function bigger(event) {

  event.target.style.height = "200px";
  event.target.style.width = "200px";

}

function smaller(event) {

  event.target.style.height = "100px";
  event.target.style.width = "100px";

}

function remove(event) {

  var elem = document.getElementById("one");
  elem.parentNode.removeChild(elem);

}

＆＃13;

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  border-radius: 25px;
}

#one {
  background-color: #11cd06;
}

#two {
  background-color: #a0f06c;
}

#three {
  background-color: #8df000;
}

#four {
  background-color: #0e5400;
}

#five {
  background-color: #538413;
}

＆＃13;

<div id="one" onclick="remove()"></div>
<div id="two" onclick="remove()"></div>
<div id="three" onclick="remove()"></div>
<div id="four" onclick="remove()"></div>
<div id="five" onclick="remove()"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用以下功能：

function addListeners(target) {
    target.addEventListener('mouseover', bigger);
    target.addEventListener('mouseout', smaller);
    target.removeEventListener("click", remove);    
}

然后，只需通过id：

在所有5个项目上调用addListeners

addListeners(oneRef);
addListeners(twoRef);
addListeners(threeRef);
addListeners(fourRef);
addListeners(fiveRef);

Answer 2

可以适用于任意数量的 div 元素的另一种方法是使用document.querySelectorAll()和Array.prototype.forEach()遍历所有 div 元素，其中回调 .forEach（）会为 mouseover 和 mouseout 添加事件侦听器。

此外，不是将单击处理程序添加到每个 div 元素，而是在整个DOM上使用通用单击处理程序。然后，当click事件的目标是 div 元素时，将其删除（注意：如果添加到页面的其他 div 元素不应该是单击时删除，应用类属性并检查类名是否存在classList.contains()）。

＆＃13;

＆＃13;

//ensure DOM has loaded before interacting with it
document.addEventListener('DOMContentLoaded', function() {
  //observe click events 
  document.addEventListener('click', function(clickEvent) {
    if (clickEvent.target.tagName.toUpperCase() == 'DIV') {
      clickEvent.target.remove();
    }
  });
  document.querySelectorAll('div').forEach(function(divElement) {
    divElement.addEventListener('mouseover', bigger);
    divElement.addEventListener('mouseout', smaller);
  });
});

function bigger(event) {

  event.target.style.height = "200px";
  event.target.style.width = "200px";

}

function smaller(event) {

  event.target.style.height = "100px";
  event.target.style.width = "100px";

}

＆＃13;

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  border-radius: 25px;
}

#one {
  background-color: #11cd06;
}

#two {
  background-color: #a0f06c;
}

#three {
  background-color: #8df000;
}

#four {
  background-color: #0e5400;
}

#five {
  background-color: #538413;
}

＆＃13;

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

＆＃13;

＆＃13;

＆＃13;