javascript - 如果EventListener已经存在，如何重用？ [纯JavaScript]

我在HTML元素上具有函数和addEventListener ＃1 的函数。它完成一些工作并执行一些功能。此外，在代码中还有其他 B 函数，带有addEventListener ＃2 ，它可以完成其他工作。
两个EventListener都位于更改“模式”。

它可以工作，但是我注意到当我执行函数 A 时，它可以正常工作，并且再次使用addEventListener ＃2 再次执行 B 函数。因此，我得到了两个(或更多-取决于我使用＃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 时，它会执行多次代码(如创建或创建多次添加):

首次使用＃1 EventListener


二次使用＃1 EventListener


...并且当我在＃1 EventListener上单击五次时，它将添加五个＃2 EventListener:



依此类推，更多次我单击＃1 EventListener，添加了更多＃2 EventListener。

我的问题是:，如何在创建后重新使用 EventListener而不是添加？我想要干净的JavaScript解决方案，而不是jQuery。

最佳答案

试试这个

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

关于javascript - 如果EventListener已经存在，如何重用？ [纯JavaScript]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35014211/