javascript - 附加和重新附加事件处理程序

Question

我使用框架(具体来说是原型(prototype))中的事件处理程序将监听器附加到页面的某些元素，如下所示:

//html
<a href="?default=1" class="default">Set Default</a>
//js
document.observe('dom:loaded', function(){
        //get all elements with d 'default' classname
        for(i = 0;i < document.getElementsByClassName('default').length;i++)
        {
                s = document.getElementsByClassName('default')[i];
                //attach an onclick event
                s.observe('click', function(e){
                        //prevent the default action (i.e loading the page)
                        e.preventDefault();
                        //read d link attribute
                        ref = this.readAttribute('href');
                        //and now, do it the ajax way
                        new Ajax.Request('js/ajax/handler.php'+ref, {
                                method:'get',
                                onSuccess:function(transport){}
                        });
                });
        }
});

效果很好。真的很好。但是有一个挑战。大多数时候，此类操作会操纵 DOM 并可能添加一个或多个“默认”类元素(即某处的另一个设置默认值)。那其实是故意的。但是，新添加的“默认”类元素将不会附加点击事件。目前糟糕的工作是再次遍历所有“默认”类并重新附加事件。还有其他想法吗？

Answer 1

通常的解决方法是通过事件委托(delegate)。如果您将 click 事件挂接到包含所有这些 .default 项目的容器上，您可以在该处理程序中响应:

document.observe('click', function(event) {
    var elm;

    elm = event.findElement('.default');
    if (elm) {
        // do your nifty stuff with the element
    }
});

如果它们共享某个更高级别的容器，则不必是 document。 Event#findElement 的文档是 here .

顺便说一句，您的 for 循环存在很大的性能问题。您在每次迭代时调用 document.getElementsByClassName!如果您使用事件委托(delegate)，该循环无论如何都会消失，但如果出于某种原因它不起作用，请调用它一次，然后循环遍历结果:

var defaults = document.getElementsByClassName('default');
for (i = 0; i < defaults.length; i++)