如果 EventListener 已经存在，如何重用它？ [普通JavaScript]

Question

我在 HTML 元素上使用 addEventListener #1 函数 A。它做一些工作并执行一些功能。在代码中还有其他 B 函数和 addEventListener #2，它做一些其他的工作。两个 EventListener 都在 change "mode".

它有效，但我注意到当我执行函数 A 时，它正常工作并再次执行 B 函数 addEventListener#2。那么我有两个（或更多 - 取决于我使用 #1 侦听器的次数）#2 EventListeners（在B 函数).

JavaScript代码（简体）：

var a = document.getElementById('firstSelect'),
    b = document.getElementById('secondSelect');

 (function()
 {
          function parent()
         {
                a.addEventListener('change', function(ev)
                {
                    alert(ev.target.innerHTML);

                  kid();
                }, false);
         };
         parent();

         function kid()
         {
                b.addEventListener('change', function(ev)
              {             
                alert(ev.target.innerHTML);

              }, false);

         } 
 }());

JSFIDDLE: https://jsfiddle.net/Chriss92/u4yrypug/

在 Chrome 中它看起来像这样 - 当点击（使用）#1 EventListener 不止一次时，它会添加一个 #2 EventListener，所以当我使用 #2 它会多次执行它的代码（因为它被创建或添加了很多次）：

先使用#1EventListener

第二次使用#1EventListener

... 当我在 #1 EventListener 上单击五次时，它会添加五个 #2 EventListeners:

以此类推，点击次数多了#1EventListener，点击次数多了#2EventListener已添加。

我的问题是：如何重用EventListener而不是添加它，当它已经创建时？我想要干净的 JavaScript 解决方案，而不是 jQuery。

Answer 1

至少有两种通用方法：

HTMLElement.onchange - 您可以在每次调用 kid 函数时替换事件侦听器。总的来说，这不是一个好的解决方案，因为可能还有其他模块可以添加它们的 onchange 事件侦听器。但是如果你的系统没问题，这会起作用。
您可以添加一些状态行为。那就是你只是在第一次调用parent和kid函数时将一些isInitialized变量设置为true，然后你在下一次检查它。如果是false，则添加一个事件监听器。

Answer 2

如果您必须在另一个事件中添加事件侦听器，我会使用反方法。除非事件计数器为零，否则不会添加事件。

实时预览：http://codepen.io/larryjoelane/pen/YwaYWM

var a = document.getElementById('firstSelect'),
b = document.getElementById('secondSelect');

//counters for each elements event
var aCount = 0, bCount = 0;

 (function()
 {
          function parent()
         {

       //if the counter equals 0
       if(aCount === 0){//begin if then

                a.addEventListener('change', function(ev)
                {
                    alert(ev.target.innerHTML);

                  kid();
                }, false);

         //increment the counter
       aCount++;

       }//end if then


         };
         parent();

         function kid()
         {

       //if the counter equals 0
       if(bCount === 0){//begin if then

                b.addEventListener('change', function(ev)
              {             
                alert(ev.target.innerHTML);

              }, false);

         //increment the counter
         bCount++;

       }//end if then

         } 
 }())

;

Answer 3

试试这个

var a = document.getElementById('firstSelect'),
b = document.getElementById('secondSelect');

(function()
 {
      function parent()
     {
            a.addEventListener('change', function(ev)
            {
                alert(ev.target.innerHTML);

              kid();
            }, false);
     };
     parent();


     function kid()
     {
        b.removeEventListener('change', kid_handler, false);
            b.addEventListener('change', kid_handler, false);
     } 

     function kid_handler(ev){
        alert(ev.target.innerHTML);
     }
 }());

如果 EventListener 已经存在，如何重用它？ [普通JavaScript]

How to reuse EventListener if it already exists? [plain JavaScript]

javascript

event-listener

reusability