addEventListener срабатывает несколько раз для одного и того же дескриптора при передаче аргументов с анонимной функцией

по какой-то причине слушатель события стрельбе дважды для каждого элемента при передаче аргументов в анонимную функцию. То есть, событие click на элементе el зарегистрируется один раз и, таким образом, огонь один раз.

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

но если я хочу передать ему свои аргументы, он зарегистрируется и выстрелит дважды.

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

вопрос в том, почему и какое решение?

Я посмотрел в другом месте и не могу найти решение или понять, почему эта проблема происходящий. Я попытался реализовать решения в как передать аргумент функции прослушивателя, переданной в addEventListener? но они не помогли --

Я сделал основную анонимную функцию или закрытие, а затем более продвинутую версию, которая показана ниже, но она работала.

Я не понимаю, почему передача аргументов не приводит к регистрации события элемента один раз и передаче аргументов, вызывающих регистрацию события элемента дважды.

здесь код:

<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>

любая помощь будет оценили. Спасибо.

6
addeventlistener anonymous-function events javascript javascript-events

3 ответов

самое простое решение-создать новый обработчик только один раз:

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

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

Ну,

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

регистрируется в той же функции " handle ()"

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

регистры " function () {handle (event, myArgument)"... это две уникальные анонимные функции. Таким образом, он выстрелит дважды.

хотя я не совсем понимаю, почему вы хотите зарегистрировать его дважды, решением было бы создать функцию, возвращающую вашу функцию, которая принимает параметры.

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

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

Он по-прежнему не решает проблему огня дважды хотя.

2

addEventListener регистрирует столько слушателей, сколько используется.

по словам документация требуется 3 аргумента, третий -useCapture который не имеет ничего общего с регистрацией прослушивателя дважды или нет. По умолчанию установлено значение false, Так что добавление false как третий параметр не сильно меняется.

0