附加和重新附加事件處理程序

Question

我使用框架（特定於原型）中的事件處理程序將偵聽器附加到頁面的某些元素，如下所示：

//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，並可能添加一個或多個“默認”類元素（即，在某處添加另一個“默認設置”）。 這實際上是故意的。 但是，新添加的“默認”類元素將不會附加click事件。 目前，最糟糕的解決方法是再次遍歷所有“默認”類並重新附加事件。 還有其他想法嗎？

Answer 1

解決此問題的通常方法是通過事件委托。 如果將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文檔在此處 。

順便說一句，for循環存在很大的性能問題。 您每次迭代都在調用document.getElementsByClassName ！ 如果您使用事件委托，則無論如何該循環都會消失，但是如果由於某種原因該循環不起作用，請調用一次 ，然后循環遍歷結果：

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

Answer 2

您可以偵聽頁面上的所有click事件，然后使用事件的目標確定用戶是否單擊了className為“ default”的元素。