javascript - 使用函数作为回调或存储它？

Question

我可以做这个

var element; // some html node

element.addEventListener("click", function() {
     alert(1);
}, false);

或这个;

var clickFunc = function() {
    alert(1);
}

element.addEventListener("click", clickFunc, false);

我做哪一个有关系吗？我在整个互联网上都读到这两种方法不同，我很难明白为什么？

Answer 1

还有第三种选择：

function clickFunc() {
  alert(1);
}

element.addEventListener("click", clickFunc, false);

这里的优点是如果抛出异常，名称（“clickFunc”）将显示在堆栈跟踪中。

如果你真的喜欢打字，你也可以这样做：

var clickFunc = function clickFunc() {
  alert(1);
};

或者，更短：

element.addEventListener("click", function clickFunc() {
  alert(1);
}, false);

但这些在旧浏览器中有一些小问题。

Answer 2

两者都在做同样的事情。只是使用匿名函数，您将无法调用 removeListener。

Answer 3

我个人更喜欢第二种选择。它更具可重用性和可测试性，您也可以使用removeEventListener. 在性能和功能方面没有任何区别。

Answer 4

就性能或功能而言，没有任何问题，但如果您想要任何可重用性，那么第二个选项会更好。

var clickFunc = function() {
    alert(1);
}

element.addEventListener("click", clickFunc, false);
element1.addEventListener("click", clickFunc, false);