Estoy tratando de hacer esto más abstracto. Necesito encontrar una manera de usar una función para el mismo elemento y diferentes eventos. También me gustaría poder pasar un argumento de elemento, pero sé que no puedo hacer esto con una devolución de llamada. Esto es lo que tengo hasta ahora:
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 );Utilice CSS en su lugar. Nunca use JS para lo que se puede lograr en 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>Si por alguna razón no reveló que necesita que esté basado en detectores de eventos, esto es lo que haría:
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>Puede escribir una función auxiliar y llamarla desde las dos devoluciones de llamada:
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);Alternativamente, puede usar una aplicación parcial con cierres para crear las dos devoluciones de llamada a partir de una función abstracta:
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);Por supuesto, @Wyck tiene razón y, en este ejemplo en particular, debe hacer todo solo con CSS :-)
Mi manera de hacer eso:
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); }) }) Otra forma de hacerlo es usando la etiqueta onmouseenter="" y la etiqueta onmouseleave="" y permitiéndoles usar la misma callback de llamada.
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>