Javascript自动执行功能

时间:2016-07-07 11:10:40

标签: javascript

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

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

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

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

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

我的问题是:

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

6 个答案:

答案 0 :(得分:6)

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

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

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

答案 1 :(得分:5)

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

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

答案 2 :(得分:2)

您不需要event

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

答案 3 :(得分:1)

删除活动

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

答案 4 :(得分:1)

如果要传递属性

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

答案 5 :(得分:0)

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

正确陈述:

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