Javascript 调试 - addEventListeners - 点击事件陷入时间性能问题

Question

我可以使用一些帮助来调试 addEventListeners。

我想要一些关于如何跟踪这些以及他们正在使用的资源的建议。 我很确定 addEventListeners 是我的问题 - 因为 - 我有一个场景 - 当我添加一定数量的这些事件(超过 10 个)时，一些点击事件开始花费比平时更长的时间时间。其他事件将不会触发。

使用 Safari 网站站长工具/“时间轴”跟踪这些较长的点击事件时间 - 我发现诸如“mousdown”之类的事件(即使是常规的 onclick="" 类型的事件)响应时间也会从几百毫秒跃升至超过 1.5 秒。肯定会有一段平静。

同样 - 在 FireFox 中 - “window.print();”在这种情况下无法触发。 奇怪的是 - 如果我在“window.print();”之前放置一个“alert()”笑话函数 - 单击关闭警报的时间间隔 - 足以允许“window.print();”正常运行。

我假设我的错误与时间管理有关，并且可能与指数增长有关。 但我不确定如何最好地调试这些 addEventListeners。

我还有许多可搜索列表，它们可以在当用户搜索时动态创建这些addEventListeners。也许我没有正确卸载它们？据我所知，可能会创建 1000 万个。

我会尽力在这里提供一些代码 - 但我真正想学习的是如何:

• 管理
• 跟踪
• 调试

这些addEventListeners

当我查看源代码时，我没有看到它们。在任何浏览器的任何控制台中，我都没有以错误的方式得到任何返回。看起来 - 一旦你创建了这些 - 就不可能跟踪它们并知道他们在做什么或没有做什么？

• 怎么样 - 有没有办法跟踪我有多少个 运行？

<小时/>

• 我使用 PHP/MySQL 从数据库中调用 Owners Pets 并存储 JavaScript 数组中的值。
• 然后我需要创建选项卡来选择每只宠物。 (每个选项卡都有一个“X”来删除该选项卡以及一个监听器)

• 我循环数据并创建选项卡和addEventListeners，如下所示:

  ...

  for(var i=0; i<Pets_Array.length; i++){// Loop Existing and Active Pets Array Tabs
  
      if(Pets_Array[i]['VISITOR_IDENTITY_DELETED'] != "1"){// if pet not deleted
  
          // Create Pet Tabbing listeners
          document.getElementById('Visitor_Details_AUTOTAB_'+i).addEventListener("click", function(event){
              event.stopPropagation();
              Pet_Tabbing_Auto_Save = true;
              ID_Of_Pet_Tabbing = this.id;
              Tst_Sv_Comp('Pet_Tabbing');
  
          },false);
  
  
          // Create Pet DeleteX listeners
  
      <?php //if($ADMIN == true){// Only Admin ?>
  
              document.getElementById('VISITOR_IDENTITY_TAB_X_BUTTON_'+i).addEventListener("click", function(event){
                  event.stopPropagation();
                  Delete_Pet(this.id);
  
  
              },false);
  
      <?php //} // Only Admin ?>
  
  
          Last_AutoLoaded_Pet = i;
  
      }// END if pet not deleted
  
  }//END  Loop Existing and Active Pets Array Tabs
  

<小时/>

这似乎很奇怪 - 我有数百个 addEventListeners ，其中包含页面上的列表、搜索、选项卡和功能。一切都表现得很好 - 直到你获得超过 10 个这样的选项卡和 addEventListeners ，这足以将所有内容都放在顶部并导致巨大的延迟时间？？？

<小时/>

这是我的其他代码，创建也利用 addEventListeners 的动态搜索列表。这些列表是在搜索功能期间添加的，因为循环了数百个搜索值。这也是在 init 中设置的 - 用所有值填充列表。无论哪种方式 - 都有一些列表，其中创建了数百个值到按钮中 - 每个列表都需要一个 addEventListeners

......

// Add dbble clck evnt listener
    document.getElementById(Who_To_Search_BREED_or_VET_CLINIC_G+'_'+key).addEventListener("mousedown", function(event){
        event.stopPropagation();
        $('#Add_'+Who_To_Search_BREED_or_VET_CLINIC_G+'_Button').hide();        
        Handle_Double_Clicks(this.id);
    },false);

<小时/>

我还使用了许多图像加载监听器，这些监听器位于通过选项卡单击启动的函数内 - 加载宠物个人资料图像。

即...

Tab_Click_Function(){

    var image = new Image();
    image.src = '../application_images/Owners/'+G_OWNER+'/Pets/'+G_Pet_Selected+'/main/'+Main_Profile_Image_For_Pets_Array_G["PET_"+G_Pet_Selected];// Visitor_Profile_Picture image;

  image.addEventListener("load", function(){

   document.getElementById('PRINT_CAMPER_PROFILE_PHOTO').src = image.src;// show image now that is has loaded into the cache

  }, false);




}

<小时/>

我相信我 - 在这里的某个地方 - 没有正确管理这些。我相信，在理解跟踪、管理和调试这些代码的最佳方法的帮助下，我将通过此代码以及 future 的代码获得更好的性能。

谢谢。

Answer 1

实际上，在 IE 6 等较旧的浏览器上，不需要很多(甚至是简单的)事件处理程序就可以遇到此问题。要解决此问题，您需要稍微改变一下方法。创建一个事件处理程序并将其附加到包含您当前为其创建处理程序的所有子元素的父 DOM 元素。然后，在该单个处理程序中，检查事件的目标并调用您最初想要的代码，在您的情况下，它可能看起来像保存。这种方法还有另一个额外的好处:当您向父级添加或删除子级时，不需要注册或取消注册任何处理程序。