JavaScript自动函数执行

Question

如果我按照这种方式编写事件，那么当应该执行操作时，它会被执行：

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

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

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

更新： 当然这只是一个例子，HandleEvent函数将会有更复杂的逻辑。

我的问题是：

1. 为什么？
2. 如何使其正常工作？

- Src

---

onmousedown 期望一个 function 引用，但你传递的是函数的返回值（即 undefined），因为你正在调用它。尝试使用 document.getElementById('myElem').onmousedown = HandleEvent。请注意，HandleEvent 是一个函数引用。 - haim770

Answer 1

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

如果要实现你想要的功能，你不应该在分配处理程序时执行它。你只需要分配函数引用即可。

然后，你也可以将其分配为 onload 处理程序，甚至在没有依赖于事件对象的情况下自己调用它。

- Ruan Mendes

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

还有其他的方式。精确的代码将取决于您的用例。

- Ben Aston

---

我如何向函数传递附加参数？ - Src

@Src Function.prototype.bind@Translated: Function.prototype.bind函数 - gcampbell

那不是你的问题。Ben回答了你提出的问题。（而且你可以很容易地在Stack Overflow上找到对于那个问题非常充分的答案。） - T.J. Crowder

使用Function.bind或者将其包装在另一个函数中，调用HandleEvent并传递您想要的参数。 - Ruan Mendes

非常感谢，运行得很完美！在您编辑问题之前我已经接受了答案，所以我认为重新接受不太合适。抱歉：\ - Src

如果这篇帖子回答了您的问题，可以随时更改接受的答案。 - Ruan Mendes

Answer 3

你不需要使用 event。

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

- Juanjo Salvador

Answer 4

移除事件。

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

- Piyush.kapoor

---

移除事件不是移除括号所做的事情的很好描述。 - Ruan Mendes

Answer 5

如果您想传递一个属性：

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

- Marc

Answer 6

你所做的是将HandleEvent()的结果分配给事件，而不是将函数分配给它。

正确的语句：

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

- engineforce