I am trying to make this more abstract. I need to find a way to use one function for the same element and different events. I would also like to be able to pass in an element argument but I know I can't do this with a callback. This is what I have thus far:
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
);
Use CSS instead. Never use JS for what can be achieved in 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>If for some reason you didn't reveal you need it to be event-listener-based, here's what I would do:
const divElement = document.querySelector('#test');
function handleMouseAction({type}) {
this.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>You can write a helper function and call that from the two callbacks:
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);
Alternatively, you can use partial application with closures to create the two callbacks from one abstract function:
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);
Of course @Wyck is right and in this particular example, you should do everything with CSS only :-)
My way to do that:
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);
})
})
Another way to do that, by using onmouseenter="" tag and onmouseleave="" tag, and letting them use the same 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>