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

Question

我在 HTML 元素上使用 addEventListener #1 函数 A。它做一些工作并执行一些功能。在代码中还有其他 B 函数和 addEventListener #2，它执行一些其他工作。两个 EventListener 都处于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 时，它会多次执行它的代码(因为它被多次创建或添加):

第一次使用#1 EventListener

第二次使用#1 EventListener

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

以此类推，我点击#1 EventListener 的次数越多，添加的#2 EventListener .

---

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

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