Question

如果我以这种方式写事件，则应该在以下情况下执行操作：

 document.getElementById('myElem').onmousedown = (e) => {
     console.log('fired!')
    }

但是，如果我以其他方式编写相同的内容，则在加载页面时执行操作，一次：

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent(event)

UPD： 当然，它只是一个例子，HandleEvent函数将具有更复杂的逻辑。

我的问题是：

为什么？
如何让它正常工作？

Answer 1

document.getElementById('myElem').onmousedown = HandleEvent;

会做你想要的;分配时不应该执行处理程序。您应该只分配函数引用。

然后你也可以将它指定为onload处理程序，甚至自己调用它（如果你不依赖于事件对象）

Answer 2

document.getElementById('myElem').onmousedown = HandleEvent;

要传递其他参数，您可以使用bind：

document.getElementById('myElem').onmousedown = HandleEvent.bind(null, argument1, argument2);

...或者您可以使用工厂功能：

document.getElementById('myElem').onmousedown = createHandler();

function createHandler() {
  var a = calculateA();
  var b = calculateA();
  return function handleEvent() {
     //use a and/or b
  };
}

还有其他方法。精确的代码取决于您的使用案例。

Answer 3

您不需要event。

let HandleEvent = (event) => 'fired!';
document.getElementById('myElem').onmousedown = HandleEvent

Answer 4

删除活动

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent

Answer 5

如果要传递属性

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent.bind(attribute)

Answer 6

您所做的是将HandleEvent（）的结果分配给事件，而不是将该函数分配给它。

正确陈述：

document.getElementById（＆＃39; myElem＆＃39;）。onmousedown = HandleEvent;

Javascript自动执行功能

6 个答案: