Javascript自动执行功能

Question

如果我以这种方式编写事件,则应在以下情况下执行操作:

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

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

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

UPD: 当然它只是一个例子,HandleEvent函数将具有更复杂的逻辑.

我的问题是:

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

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

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