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

Question

Say I'm dynamically generating some controls (example using jQuery):

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

And I want them to have different action depending on which one is clicked (mouseover, etc), what is the best practice for attaching a handler so it knows which button is being clicked? I can think of 3 alternatives:

1. Attach the same handler (via javascript) to all buttons and have the handler parse the element id to determine which one is clicked
2. Add the handlers inline when generating the HTML for the controls (ie have onclick="do_something('+c+');")
3. Attach different handler (eg with a loop) for each element that has the button number set in the handler argument

Which method is preferred or is there another alternative?

Edit:

Sorry, but I should probably mention that the number of generated elements are variable and the handler only needs the button number (ie not a completely different handler function for each button). A simple example use case would be a list grabbed via ajax that you want the user to order, in this case the handler would just need the index number for the list.

For fixed number of elements with distinct handlers David's answer makes sense.

Answer 1

I would say event delegation is preferred in this case:

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

This way only one event listener is attached to the button's parent (the body in this example), but you can still access the button element that was clicked in the handler.

You can f.ex map actions to the buttons like this:

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);
});

Answer 2

Method 1 is most flexible. "event delegation" mentioned by David is also just a variation of your method 1 (if you turn the Object key into a function param). When used together with other event assignment, you can flexibly turn on / off different handling over the same object. You can also handle "event propagation" better.

Method 2 is simple but it has limited capability and is a bit odd when used together with other methods to register event handler such as jQuery. A nice article to read about inline handler: https://www.htmlgoodies.com/html5/javascript/working-with-inline-event-handlers.html

Method 3 sounds bad in performance as the function has to be complied many times, and will make your code harder to maintain.