Javascript 跟踪点击；搜索DOM的性能影响

我有一个Javascript插件，它在DOM中搜索以类名“tracking”开头的任何元素，并向该元素添加一个click事件监听器（或其他类型的监听器，如果指定的话）。其思想是，每当该事件在该元素上发生时，它都会运行一个Javascript函数，将数据发送到我们的流量服务器。下面是代码的样子：

// Once the page is completed loaded
window.mmload(function() {      
    // Get the container object
    obj = document.getElementById(name);

    if ( obj.length < 0 )
        throw ("The Id passed into the tracker does not exist ("+name+")");

    // Find all the elements belonging to the tracking class 
    var trackingClass = new RegExp( /tracking\[[a-zA-Z0-9\.\-_]+\]/g );
    var myElements = getElementsByRegex( trackingClass, obj );

    //For each of those elements...
    for( var i in myElements ) {
        var elm = myElements[i];
        var method = elm.className.match( /tracking\[[a-zA-Z0-9\.\-_]+\]/ )[0].split('[')[1].replace(']','').split('.')[2];
        method = typeof( method ) == 'undefined' ? 'click' : method;

        // Add a click event listener
        myElements[i].addEventListener( method, function(e){
            // Get the element, the link (if any), and the args of the event                
            var link = elm.getAttribute('href') == null ? "" : elm.getAttribute('href');
            var args = elm.className.match( /tracking\[[a-zA-Z0-9\.\-_]+\]/ )[0].split('[')[1].replace(']','').split('.');

            // If a link existed, pause it, for now
            if ( link != '' )
                e.preventDefault();

            // Track the event
            eventTracker( args[0], args[1], ( method == 'click' ? 'redirect' : 'default' ), link );

            return false;
        }, true);
    }
});

//页面加载完成后
mmload（函数（）{
//获取容器对象
obj=document.getElementById（名称）；
如果（对象长度<0）
throw（“传入跟踪器的Id不存在（“+name+”））；
//查找属于跟踪类的所有元素
var trackingClass=新的RegExp（/tracking\[[a-zA-Z0-9\.-\.+\]/g）；
var myElements=getElementsByRegex（trackingClass，obj）；
//对于这些元素中的每一个。。。
for（myElements中的var i）{
var-elm=髓鞘成分[i]；
var method=elm.className.match（/tracking\[[a-zA-Z0-9\-\-\+\]/）[0]。拆分（'['）[1]。替换（']'，''）。拆分（']）[2]；
方法=类型（方法）=“未定义”？“单击”：方法；
//添加单击事件侦听器
myElements[i].addEventListener（方法，函数（e））{
//获取事件的元素、链接（如果有）和参数
var link=elm.getAttribute（'href'）==null？”：elm.getAttribute（'href'）；
var args=elm.className.match（/tracking\[[a-zA-Z0-9\-\-\]+\]/）[0]。拆分（'['）[1]。替换（']'，''）。拆分（'）；
//如果存在链接，请暂时暂停
如果（链接！=''）
e、 预防默认值（）；
//跟踪事件
eventTracker（args[0]，args[1]，（方法=='click'？'redirect'：'default'），链接）；
返回false；
}，对）；
}
});

现在，我已经在窗口完全加载后运行了这堆代码（

window.mmload（）

是我为追加

window.onload

事件而创建的函数）。然而，有时我可能需要再次运行此函数，因为我通过使用此类名的Javascript向DOM添加了新元素，并且我也想跟踪它们

我最初的解决方案是使用

setInterval

运行此函数，每隔几毫秒或几秒钟或任何最有意义的时间检查DOM。然而，我担心如果我采取这种方法，可能会减慢网站的速度，特别是因为它是在智能手机的移动网站上运行的。如果我经常搜索DOM，我不确定会受到什么样的性能影响

---

我想到的另一种方法是在向DOM中添加可跟踪元素后简单地调用函数。这可能是最有效的处理方法。然而，与我一起工作的人，被认为是非常聪明的人，都是网页设计师，他们不经常思考也不太理解代码。所以我做得越简单越好。这就是为什么我喜欢

setInterval

方法，因为它们不需要额外的东西。但是，如果它明显减慢了站点的速度，我可能不得不采取另一种方法。

如果没有IE也可以生存，那么就有一个

更改

事件，可以为window/document/dom元素挂钩。只需在文档级别钩住事件，它就会在页面中发生任何更改（插入、删除、更改的内容）时触发。我相信事件的上下文包含了被改变的东西，所以发现任何新的可追踪元素并将间谍代码附加到它上应该相当微不足道。

你应该考虑<强>甚至委派< /强>

您只需向文档根添加一个事件侦听器，并检查事件源自的元素的类（

event.target

）。如果还希望包含来自子体的单击，则必须从目标遍历DOM，并检查是否有任何子体包含该类

我认为有两个主要优势：

• 它适用于新生成的元素，无需任何额外步骤（因此其他开发人员不必做任何特殊的事情）
• 它只添加一个事件处理程序，而不是可能添加多个，这节省了内存

缺点：

• 如果沿路径注册了其他事件处理程序，并且它们阻止事件冒泡，则无法注册此事件

更多信息：

事件处理程序获取一个

事件

对象作为第一个参数。除其他外，此对象具有

例如，要获取目标元素：

var element = event.target || event.srcElement;

这将是一个DOM元素，您可以通过

元素.className

访问这些类

因此，您的事件侦听器可能如下所示（请注意，事件对象不是通过

窗口传递的，而是通过
窗口提供的。event
）：

但正如我所说，这将错过那些被阻止冒泡的事件。至少在遵循W3C模型（因此不是IE）的浏览器中，您可以通过将最后一个参数设置为
true
，来处理中的事件：

document.addEventListener('click', handler, true);

第三个选项是编写一个方法来操作元素的innerHTML。在该方法的末尾，只需调用刷新所有内容的函数

例如：

var setHtml = function(element, newHtml){
     element.innerhtml = newHtml;
     yourRefreshFunction();
}

很明显，这需要web开发人员使用此方法来更新dom。对于任何比简单html编辑更复杂的内容，您都必须这样做。但这给了你想法

希望有帮助
 这不是一个真正的答案，但这似乎正是jQuery设计用来帮助您的。使用jQuery，上面的代码大约有5-10行。别做受虐狂！事实上，一开始我确实是在jQuery中做的，然后我的老板让我把它转换成纯JavaScript。我认为他想保持它的简单，而不必加载任何额外的库。但是是的，我是wi
var setHtml = function(element, newHtml){
     element.innerhtml = newHtml;
     yourRefreshFunction();
}