So many ways to bind an event

Question

There are various ways to bind events to elements in jquery

.click , .bind, .live, .delegate, saving events data in .data etc

which is the most superior method among these and why?

wouldn't a single pattern like this be more beneficial?

$('selector').bind({
            event: 'click mouseover ...',
            keepAlive: (true, false, ...),
            trigfunction: (function() {
                // I run for click
            }, function() {
                // i run for mouseover
            }, function() {
                ///...
            })
        });

Answer 1

i guess one factor is the ease of use that handlers like .click() have. The same could be said for jquery's ajax functions. While ajax() is low level and very customizable .load() is quicker to set up if you have basic needs.

Use .click() and .change() a lot to quickly add handlers to elements without specifying a lot of parameters. The defaults work for me in those cases.

Answer 2

Think of the different ways as syntactic sugar. Take one for example. Would you really want to add this to your code every time?

$("#id").bind("click", function() {
    $(this).unbind("click");
    // ...
});

Answer 3

I don't agree that setup would be simpler, because you so rarely bind more than 1 or 2 events to objects, at least in the grand scheme of things...thought it does happen.

.event(func) is a shortcut, it's equivalent to .bind('event', func) so whatever your preferences is there is all that matters. However you if want want to bind the same handler to multiple events, .bind('event1 event2 event3', func) is much shorter.

.delegate(selector, event, func) is just .live('event', func) with a context, but of course these behave off bubbling, so they have another use...not necessarily "superior", just depends on the purpose.

It all depends on what you're trying to accomplish as to which is better. Binding 4,000 elements with .bind() is a lot less efficient than .live() or .delegate() once. The reverse is true too though, .bind() on a single element (that isn't replaced via AJAX, etc) is a lot more efficient than having .live() listen for an event that will bubble 20 times. If you're looping through JSON for example and binding n items, this should be a concern, as there is time spent assigning those event handlers.