Question

我注意到addEventListener回调的function和function()之间存在差异。在我尝试传递参数之前，这不是问题。基本上，

element.addEventListener("hover", logInput, false );
function logInput(){
    console.log('registered!');
}

按预期工作，但添加括号将导致它立即记录，而不会持续响应事件触发器：

element.addEventListener("hover", logInput(), false );
function logInput(){
    console.log('registered!');
}

这是为什么？如何在传递参数时让它工作，如：

element.addEventListener("hover", logOnInput(this), false );
function logOnInput(triggeredElement){
    console.log(triggeredElement);
}

Answer 1

（如果您真的想要触发元素，请不要传递任何内容。this将自动设置为触发元素。）

element.addEventListener("hover", logOnInput, false);
function logOnInput(){
    console.log(this);
}

回答您更常见的问题......

有几种方法可以将函数作为参数传递，并且已经设置了某些参数（这称为“部分应用程序”）。如果您能够使用现代JavaScript功能，最简单的方法可能是使用arrow function。

element.addEventListener("hover", () => logOnInput(foo), false);
function logOnInput(message){
    console.log(message);
}

这只适用于非常现代的浏览器。例如，在IE 11中它不起作用。为了支持旧版浏览器，您可以使用更长形式的函数表达式。

element.addEventListener("hover", function() {logOnInput(foo);}, false);
function logOnInput(message){
    console.log(message);
}

或者您可以定义一个单独的函数（不适用于this，但可以使用其他变量）。

element.addEventListener("hover", logFooOnInput, false);
function logOnInput(triggeredElement){
    console.log(triggeredElement);
}
function logFooOnInput() {
    logOnInput(foo);
}

或者您可以使用bind。

element.addEventListener("hover", logOnInput.bind(null, foo), false);
function logOnInput(message){
    console.log(message);
}

Answer 2

当你想要使用括号调用函数时，它是一个javascript。函数外没有括号是没用的。但是在函数作为参数内部，您使用没有括号的函数，以便当该事件发生时，它只会运行。如果在函数参数内使用括号调用函数，它将立即执行，并且也会在事件发生时运行。要在函数内调用函数及其参数，只需要在该事件中调用，您需要使用如下所示的bind方法：

element.addEventListener("hover", logOnInput.bind(null, argument1, argument2, etc), false );

但是，如果你想选择上下文为this，那么我建议你这样使用：

function logOnInput(elem,arguments) {
  //now you can use **elem** to refer **this**
}

并使用匿名函数进行悬停事件，如下所示：

element.addEventListener("hover", function(){
   logOnInput(this,arguments)
}, false );

Answer 3

如果仅针对现代浏览器，绑定功能可能是最干净的选项。一些博客讨论了将bind与匿名函数进行比较时的性能损失。一些博客谈论匿名功能。关于匿名功能。所有在addEventListener上传递参数都很顺利。但是当你得到removeEventListener时，传递参数将不会像addEventListener中那样工作。我在2005年找到了这个家伙的答案： http://www.codingforums.com/dom-and-json-scripting/5909-how-pass-arguments-independently-using-addeventlistener.html

在简历中，将您的匿名函数设置为等于新声明的“事物”。 Idk如果这是var或表达式。我测试了var，它不会工作。暂时解决这方面的技术问题，但它确实有效。

function addhoverIn(SELECTED) {
        SELECTED.addEventListener("mouseover", addHIn = function() { hoverIn(SELECTED); }, false);  
    }
function hoverIn(SELECTED) {
        SELECTED.removeEventListener("mouseover", addHIn, false);
    }

Javascript，addEventListener回调函数立即执行，只执行一次？

3 个答案: