我試圖讓這更抽象。我需要找到一種方法來為相同的元素和不同的事件使用一個函式。我還希望能夠傳入一個元素引數，但我知道我不能通過回呼來做到這一點。這是我迄今為止所擁有的：
const divElement = document.querySelector('#test');
divElement.addEventListener(
'mouseenter',
(event) => {
divElement.classList.add('shadow');
console.log(event);
},
false
);
divElement.addEventListener(
'mouseleave',
(event) => {
divElement.classList.remove('shadow');
console.log(event);
},
false
);
uj5u.com熱心網友回復：
您可以撰寫一個輔助函式并從兩個回呼中呼叫它：
const divElement = document.querySelector('#test');
function handleEvent(event, action) {
divElement.classList[action]('shadow');
console.log(event);
}
divElement.addEventListener('mouseenter', (event) => handleEvent(event, 'add'), false);
divElement.addEventListener('mouseleave', (event) => handleEvent(event, 'remove'), false);
或者，您可以使用帶有閉包的部分應用程式從一個抽象函式創建兩個回呼：
const divElement = document.querySelector('#test');
function makeEventHandler(action) {
return (event) => {
divElement.classList[action]('shadow');
console.log(event);
};
}
divElement.addEventListener('mouseenter', makeEventHandler('add'), false);
divElement.addEventListener('mouseleave', makeEventHandler('remove'), false);
當然@Wyck 是對的，在這個特定的例子中，你應該只用 CSS 做所有事情:-)
uj5u.com熱心網友回復：
改用 CSS。永遠不要將 JS 用于可以在 CSS 中實作的功能。
#test {
background-color: white;
padding: 30px;
transition: all 0.4s ease;
}
#test:hover {
box-shadow: 0 0 10px #000;
}<div id="test">
Lorem ipsum dolor sit amentur.
</div>如果由于某種原因你沒有透露你需要它是基于事件監聽器的，這就是我會做的：
const divElement = document.querySelector('#test');
function handleMouseAction({type}) {
divElement.classList.toggle('shadow', type === 'mouseenter');
}
divElement.addEventListener('mouseenter', handleMouseAction, false);
divElement.addEventListener('mouseleave', handleMouseAction, false);#test {
padding: 30px;
transition: all 0.4s ease;
}
.shadow {
box-shadow: 0 0 10px #000;
}<div id="test">
Lorem ipsum dolor sit amentur.
</div>uj5u.com熱心網友回復：
我的方法是：
const divElement = document.querySelector('#test');
const events = ["mouseenter", "mouseleave"]
events.forEach(event => {
divElement.addEventListener(event, (e) => {
// TODO put logic here.
divElement.classList.add('shadow');
console.log(event);
})
})
另一種方法是使用onmouseenter=""標簽和onmouseleave=""標簽，并讓它們使用相同的callback.
const callback = (element) => {
element.classList.add("shadow");
}.shadow {
display: block;
box-shadow: 0 0 10px black;
}<div onmouseenter="callback(this)" onmouseleave="callback(this)">Hello World</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354518.html
標籤：javascript dom事件