Javascript 只有三个事件侦听器

我试图在鼠标移到每个div元素上后更改它们的大小。一旦你鼠标出我需要他们返回到原来的大小。单击每个div元素后，我希望它们消失。我相信所有这些都在起作用。我的问题是我觉得我不需要15个事件侦听器。有没有一种方法可以只使用三个事件侦听器

var oneRef=document.getElementById（“一”）；
oneRef.addEventListener（'mouseover'，更大）；
oneRef.addEventListener（'mouseout'，较小）；
oneRef.removeEventListener（“单击”，删除）；
var oneRef=document.getElementById（“两个”）；
oneRef.addEventListener（'mouseover'，更大）；
oneRef.addEventListener（'mouseout'，较小）；
oneRef.removeEventListener（“单击”，删除）；
var oneRef=document.getElementById（“三”）；
oneRef.addEventListener（'mouseover'，更大）；
oneRef.addEventListener（'mouseout'，较小）；
oneRef.removeEventListener（“单击”，删除）；
var oneRef=document.getElementById（“四”）；
oneRef.addEventListener（'mouseover'，更大）；
oneRef.addEventListener（'mouseout'，较小）；
oneRef.removeEventListener（“单击”，删除）；
var oneRef=document.getElementById（“五”）；
oneRef.addEventListener（'mouseover'，更大）；
oneRef.addEventListener（'mouseout'，较小）；
oneRef.removeEventListener（“单击”，删除）；
功能（活动）{
event.target.style.height=“200px”；
event.target.style.width=“200px”；
}
功能（事件）{
event.target.style.height=“100px”；
event.target.style.width=“100px”；
}
函数删除（事件）{
var elem=document.getElementById（“一”）；
elem.parentNode.removeChild（elem）；
}

div{
高度：100px；
宽度：100px；
显示：内联块；
边界半径：25px；
}
#一个{
背景色：#11cd06；
}
#两个{
背景色：#a0f06c；
}
#三{
背景色：#8df000；
}
#四{
背景色：#0e5400；
}
#五{
背景色：#538413；
}

---

您可以使用以下功能：

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);

---

另一种适用于任意数量的div元素的方法是使用and遍历所有div元素，其中对.forEach（）的回调为mouseover和mouseout添加事件监听器

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

//确保在与DOM交互之前已加载DOM
document.addEventListener（'DOMContentLoaded'，function（）{
//观察点击事件
document.addEventListener（'click'，函数（clickEvent）{
如果（clickEvent.target.tagName.toUpperCase（）=“DIV”）{
单击event.target.remove（）；
}
});
document.querySelectorAll（'div'）.forEach（函数（divElement）{
divElement.addEventListener（'mouseover'，更大）；
divElement.addEventListener（'mouseout'，更小）；
});
});
功能（活动）{
event.target.style.height=“200px”；
event.target.style.width=“200px”；
}
功能（事件）{
event.target.style.height=“100px”；
event.target.style.width=“100px”；
}

div{
高度：100px；
宽度：100px；
显示：内联块；
边界半径：25px；
}
#一个{
背景色：#11cd06；
}
#两个{
背景色：#a0f06c；
}
#三{
背景色：#8df000；
}
#四{
背景色：#0e5400；
}
#五{
背景色：#538413；
}