Question

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

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

使用 Safari 网站站长工具/“时间线”追踪这些长 clickevent 次 - 我发现诸如“ mousdown ”之类的事件（即使是常规的 onclick =“”类型的事件）响应时间从几百毫秒跳到超过1.5秒。绝对是一种平静。

同样 - 在 FireFox - “window.print（）;”在这种情况下无法触发。奇怪的是 - 如果我在“ window.print（）;”之前放置一个“警告（）”笑话function - 单击以关闭警报的时间圈 - 足以允许“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);




}

我相信我 - 在某处 - 没有妥善管理这些。我相信，通过一些帮助来理解跟踪，管理和调试这些的最佳方法 - 我将使用此代码以及未来的代码获得更好的性能。

谢谢。

Answer 1

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

Javascript调试 - addEventListeners - 单击事件可以减少时间性能问题

1 个答案: