如果 EventListener 已经存在，如何重用它？ [纯 JavaScript]答案

【问题标题】：How to reuse EventListener if it already exists? [plain JavaScript]如果 EventListener 已经存在，如何重用它？ [纯 JavaScript]
【发布时间】：2016-05-03 00:54:44
【问题描述】：

我在 HTML 元素上有带有 addEventListener #1 的函数 A。它做一些工作并执行一些功能。在代码中还有其他带有addEventListener #2 的B 函数，它可以完成其他一些工作。两个EventListeners 都处于change“模式”。

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

JavaScriptCode（简体）：

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。

【问题讨论】：

有点混乱。还要添加代码如何分配事件监听器
查看如何移除事件监听器。正如您可以添加事件侦听器一样，您也可以将它们从 DOM 元素中移除。所以在我看来，您需要管理何时将事件侦听器添加到元素，何时不添加。
如果您将两个侦听器添加到同一个元素，那就是问题所在。您应该为同一元素上的同一事件使用 N 个函数，而不是为同一事件使用 N 个侦听器。
我添加了代码和 JSFiddle 演示

标签： javascript event-listener reusability

【解决方案1】：

试试这个

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

【讨论】：

感谢您提供简单且可重复使用的解决方案。

【解决方案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

         } 
 }())

;

【讨论】：

【解决方案3】：

至少有两种通用方法：

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

【讨论】：