1

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

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

使用Safari网站管理员工具/“时间轴”跟踪这些较长的点击事件时间 - 我发现诸如“ mousdown ”之类的事件（甚至是常规的onclick=""类型的事件）响应时间从几百毫秒跳到超过 1.5 秒。肯定有一个平静。

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

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

我还有许多可搜索的列表，这些列表可以在用户搜索时动态创建这些addEventListener。也许我没有正确卸载它们？据我所知，可能会创建 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的动态搜索列表这些是在搜索功能期间添加的，因为循环了几百个搜索值。这也是在初始化时设置的 - 使用所有值填充列表。无论哪种方式 - 有几个列表有几百个值被创建到按钮中 - 每个都需要一个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);

我还使用了许多图像加载侦听器，这些侦听器位于由选项卡单击触发的函数内部 - 以加载宠物个人资料图像。

IE..

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




}

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

谢谢你。

4

1 回答 1

0

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

于 2013-09-06T02:58:05.260 回答