Javascript 将处理程序（具有不同操作）附加到多个生成元素的最佳实践？

假设我正在动态生成一些控件（例如使用jQuery）：

对于（var c=0；c我认为在这种情况下更可取：

$('body').on('click', 'input', function(e) {
    // do something with this (the element that was clicked)
    console.log(this.value);
});

这样，只有一个事件侦听器连接到按钮的父级（本例中为
主体
），但您仍然可以访问在处理程序中单击的按钮元素

您可以将f.ex动作映射到如下按钮：

for (var c=0 ; c<100 ; c++) {
    $('body').append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

var actions = {
    btn_0: function() {
        console.log('btn 0 clicked');
    },
    btn_1: function() {
        console.log('btn 1 clicked');
    }
    // etc...
};

$('body').on('click', 'input', function(e) {
    $.isFunction(actions[this.id]) && actions[this.id].call(this);
});

for（var c=0；c方法1最灵活。
David提到的“事件委派”也只是方法1的一个变体（如果您将对象键转换为函数参数）。当与其他事件分配一起使用时，您可以灵活地打开/关闭对同一对象的不同处理。您还可以更好地处理“事件传播”

方法2很简单，但功能有限，当与其他方法（如jQuery）一起用于注册事件处理程序时有点奇怪。这是一篇关于内联处理程序的好文章：

方法3的性能听起来很差，因为函数需要多次编译，这会使代码更难维护。
1和2之间最终没有区别。选择其中一种方法。最后一种方法很差，因为即使不必一直写下来，也不会重用现有代码。1或2是最常见的方法s、 关于方法3，如果将处理程序附加到每个按钮，则不需要将按钮编号设置为参数，因为您可以在函数中使用
this
。4.将处理程序委托给更高的元素，并在事件处理程序中为该更高的元素筛选元素，因此您只需要一个事件处理程序。感谢nswer，但实际上我正试图用一个对按钮编号进行操作的处理程序来处理数量可变的生成元素，我应该在问题中指定该编号。不过，我以前不知道事件委派，知道它是一个很好的信息。我将编辑我的问题。
for (var c=0 ; c<100 ; c++) {
    $('body').append('<input id="btn_'+c+'" type="button" value="Button #'+c+'" />');
}

var actions = {
    btn_0: function() {
        console.log('btn 0 clicked');
    },
    btn_1: function() {
        console.log('btn 1 clicked');
    }
    // etc...
};

$('body').on('click', 'input', function(e) {
    $.isFunction(actions[this.id]) && actions[this.id].call(this);
});