Question

我在HTML元素上使用{strong> A ，addEventListener ＃1 。它做了一些工作并执行了一些功能。此外，在代码中还有其他 B 函数，其中addEventListener ＃2 ，还可以完成其他工作。这两个EventListener都处于更改＆＃34;模式＆＃34;。

它有效，但我注意到当我执行函数 A 时，它正常工作并再次执行 B 功能＆{39} 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 { {1}}，所以当我使用＃2 时，它会多次执行代码（因为它已创建或添加了很多次）：

首次使用＃1 EventListener

第二次使用＃1 EventListener

...当我在＃1 EventListener上点击五次时，它会添加五个＃2 EventListener：

依此类推，我点击＃1 EventListener的次数会增加更多＃2 EventListener。

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

Answer 1

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

实时预览：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 2

试试这个

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

Answer 3

至少有两种通用方法：

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

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

3 个答案: