Question

0

54

Vistas

Javascript - call one function for same element different event?

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

7 months ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

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

7 months ago · Juan Pablo Isaza Denunciar

0

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>

7 months ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-10T14:02:50.883Z

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>