如何動態地將功能分配給元素的onclick事件？

Question

與為每個元素的click事件設置單個功能相反，我想對元素進行迭代並根據id或其他內容進行分配？

document.getElementById('measure').onclick = function() { clickMe(1); };

我將如何處理？

Answer 1

過去，我已經按照以下方式做過一些事情：

var setClickOnElements = function(selector) {
    $(selector).each(function() {
        $(this).click(function(event) {
            // behaviour on click
        });
    });
};

...其中selector是類選擇器，例如.my-class 。 在傳遞給each回調函數的回調中，您可以獲取所選元素的其他屬性，例如id等。如果將該類添加到元素，則需要設置click函數並調用setClickOnElements('.my-class'); 加載后，您應該會很好！

編輯：上面使用jQuery。 如果您僅限使用純Javascript，則可以使用John Resig的getElementByClass實現的文章中描述的方法之一： http : //ejohn.org/blog/getelementsbyclassname-speed-comparison/

這是一個示例（使用http://www.dustindiaz.com/getelementsbyclass的 Dustin Diaz的方法）：

var getElementsByClass = function(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

var setClickOnElements = function(className) {
    var elements = getElementsByClass(className);
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.onclick = function(event) {
            // click behaviour here
        };
    }
};