jquery use of bind vs on click

I have come across several methods for handling click events in jquery:

bind:

$('#mydiv').bind('click', function() {
    ...
});

click:

$('#mydiv').click(function() {
   ...
}

on:

$('mydiv').on('click', function() {
   ...
}

Two questions:

1. Are they any other ways of doing this?
2. Which one should I use, and why ?

UPDATE:

As eveyone has helpfully suggested, I should have read the docs better, and found out that I should use:

on() or click(),

which are effectively the same thing.

However, nobody has explained why bind is no longer recommended ? I'll probably get more downvotes for missing the obvious somewhere, but I can't find a reason for this in the documents.

UPDATE2:

'on' has the useful effect of being able to add event handlers to dynamically created elements. e.g.

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

This code adds a click handler to elements with a class of 'myClass'. However, if more myClass elements are then dynamically added later, they automatically get the click handler as well, without having to explicitly call 'on'. From what I understand people are saying, this is also more efficient (see Simons answer below).

From the documentation of bind and click :

bind :

> As of jQuery 1.7, the .on() method is the preferred method for > attaching event handlers to a document.

The source makes it clear there's no reason to use bind, as this function only calls the more flexible on function without even being shorter :

bind: function( types, data, fn ) {
	return this.on( types, null, data, fn );
},

So I'd suggest, just like the jQuery team, to forget the old bind function, which is now useless. It's only for compatibility with older code that it's still here.

click :

> This method is a shortcut for .on('click', handler)

This shortcut is of course less powerful and flexible than the on function and doesn't allow delegation but it lets you write a shorter and, arguably, slightly more readable, code when it applies. Opinions diverge on that point : some developers argue that it should be avoided as it is just a shortcut, and there's also the fact that you need to replace it with on as soon as you use delegation, so why not directly use on to be more consistent ?

To your first question: there's also .delegate, which was superseded by .on as of jQuery 1.7, but still is a valid form of binding event handlers.

To your second question: You should always use .on like the docs say, but you should also pay attention on how to use .on, because you can either bind the event handler on an object itself or a higher level element and delegate it like with .delegate.

Say you have an ul > li list and want to bind a mouseover event to the lis. Now there are two ways:

• $('ul li').on('mouseover', function() {});
• $('ul').on('mouseover', 'li', function() {});

The second one is preferable, because with this one the event handler gets bound to the ul element once and jQuery will get the actual target item via event.currentTarget (jQuery API), while in the first example you bind it to every single list element. This solution would also work for list items that are being added to the DOM during runtime.

This doesn't just work for parent > child elements. If you have a click handler for every anchor on the page you should rather use $(document.body).on('click', 'a', function() {}); instead of just $('a').on('click', function() {}); to save a lot of time attaching event handlers to every element.

I think that you should have searched the http://api.jquery.com/bind/">jquery docs before posting this question :

> As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.