javascript - 如何动态地将函数分配给元素的 onclick 事件？

Question

与为每个元素的点击事件设置单独的函数相反，我想迭代元素并根据 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
        };
    }
};