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

Answer 1

原因是，在第一种情况下，您尝试添加函数listenerFn的相同实例，在第二种情况下，您添加两个不同的实例（evenry myFunction（）调用具有其自己的listnerFn（）实例。 / p>

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

(function () {

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

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

       return listenerFn;
    }
  })();

Answer 2

请参见the spec：

如果eventTarget的事件侦听器列表不包含类型为侦听器类型的事件侦听器，callback为侦听器的回调，而capture为侦听器的捕获，则将侦听器追加到eventTarget的事件侦听器列表中。

在第一种情况下，您尝试多次添加与事件侦听器相同的功能。

第一次添加它。

第二次不满足“ *不包含…回调是侦听器的回调”的条件，所以它不满足。

在第二种情况下，您将添加两个不同（尽管相同）的事件侦听器。

Answer 3

因为您两次了解该功能

JavaScript addEventListener异常

3 个答案: