javascript - Javascript addEventListener 异常

Question

有人可以解释为什么这不会在点击时触发两次“listenerFn”

(function () {

    document.querySelector("div").addEventListener("click", listenerFn);
    document.querySelector("div").addEventListener("click", listenerFn);

    function listenerFn() {
        console.log("__testing__");
    } })();

而像下面这样的触发是预期的两倍：

(function () {

myFunction()
myFunction()

function myFunction() {
    function listenerFn() {
        console.log('My Message')
    }
    document.querySelector('div').addEventListener('click', listenerFn)
} })();

标签： javascriptaddeventlistener

Answer 1

原因是，在第一种情况下，您尝试添加函数 listenerFn 的相同实例，而在第二种情况下，您正在添加两个不同的实例（甚至 myFunction() 调用都有自己的 listnerFn() 实例。

您可以像这样更新您的第一个代码示例，它应该可以工作：

(function () {

    document.querySelector("div").addEventListener("click", getListenerFn());
    document.querySelector("div").addEventListener("click", getListenerFn());

    function getListenerFn() {
         let listenerFn = function() {
           console.log("__testing__");
        } 

       return listenerFn;
    }
  })();