可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

For some reason, the event listener is firing twice for each element when passing arguments into an anonymous function. I.e., the click event on element el will register once and, thus, fire once.

el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);

But if I want to pass my own arguments to it, it will register and fire twice.

el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);

The question is why and what's the solution?

I looked elsewhere and cannot seem to find a solution or understand why this problem is occurring. I tried implementing the solutions in How to pass an argument to the listener function passed in addEventListener? but they did not help --

I did the basic anonymous function or closure and then the more advanced version, which is the shown below but it did work.

I don't get why passing no arguments causes the element event to register once and passing arguments causing the element event to register twice.

Here is the code:

<html>
    <head>
        <script type="text/javascript">
            var handle_2 = function(evt, type) {
                var test;
                switch (type) {
                    case "focus": 
                        console.log(evt.target.value);
                        break;
                    case "click":
                        console.log(evt.target.id + " was clicked");
                        break;
                    default: console.log("no type found");
                }
            };

            window.onload = function() {
                var textbox = document.getElementById("t1");
                var button = document.getElementById("btn");
                textbox.value = "456";
                button.value = "Press";

                var typeFocus = "focus", typeClick = "click";

                textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
                button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);

                // Registers again for each element. Why?
                textbox.addEventListener("focus", (function(typeFocus) { return function(evt) { handle_2(evt, typeFocus); }})(typeFocus), false);
                button.addEventListener("click", (function(typeClick) { return function(evt) { handle_2(evt, typeClick); }})(typeClick), false);
            };
        </script>
    </head>
    <body>
        <div id="wrapper">
            <input id="t1" type="text" />
            <input id="btn" type="button" />
        </div>
    </body>
</html>

Any help would be appreciated. Thank you.

回答1:

The simplest solution is to create the new handler only once:

var newHandle = function(event) { handle(event, myArgument); };

el.addEventListener("click", newHandle, false);
el.addEventListener("click", newHandle, false);

回答2:

Well,,

el.addEventListener("click", handle, false);
el.addEventListener("click", handle, false);

Registers to the same function "handle()"

el.addEventListener("click", function() { handle(event, myArgument); }, false);
el.addEventListener("click", function() { handle(event, myArgument); }, false);

Registers "function() { handle(event, myArgument)"... which are two unique anonymous functions. Thus it will fire twice.

Although I don't fully understand why you would want to register it twice, the solution would be to create a function returning your function that takes parameters.

el.addEventListener("click", crateHandle(myArgument), false);

var createHandle = function(myArgument) {
  return function(event) {
    .... do something
  };
}

It still doesn't solve the fire twice issue though.

回答3:

addEventListener registers as many listeners as it is used.

According to the documentation it takes 3 arguments, the third is useCapture which has nothing to do with registering listener twice or not. It is by default set to false, so adding false as a third parameter doesn't change much.