Javascript

Question

我正在努力使它更抽象。我需要找到一种方法来为相同的元素和不同的事件使用一个函数。我也希望能够传递一个元素参数，但我知道我不能通过回调来做到这一点。这是我到目前为止所拥有的：

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

Answer 1

我的方法：

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>

Answer 2

您可以编写一个辅助函数并从两个回调中调用它：

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 做所有事情:-)

Answer 3

改用CSS。在 CSS.

中可以实现的东西永远不要使用 JS

#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}) {
  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>

Javascript - 为同一元素的不同事件调用一个函数？

Javascript - call one function for same element different event?

dom-events