Skip to content

added level metadata for issue #129 #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 16, 2012
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions page/events/history-of-events.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
---
title : History of jQuery Events
title: History of jQuery Events
level: intermediate
---
Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the `.on()` method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of *event delegation* from jQuery v1.0 - present and how each version leverages it.
Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the `.on()` method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of *event delegation* from jQuery v1.0 - present and how each version leverages it.

Given the following html, for our example we want to log the text of the each `<li>` to console whenever it is clicked.

Expand All @@ -24,7 +25,7 @@ It is possible to use `.bind()` and attach a handler to every element.

```
​$('#list li').bind('click', function(event){
console.log( $elem.text() );
console.log( $elem.text() );
});​​​​​​​​​​​​​​​​​​​​​
```
As discussed in the [event delegation](/event/event-delegation) article, this is not optimal.
Expand All @@ -42,7 +43,7 @@ Generally we don't associate `.bind()` with *event delegation*, however prior to
​$('#list').bind('click', function(event){
var $elem = $(event.target);
if( $elem.is("li") ){
console.log( $elem.text() );
console.log( $elem.text() );
}
});​​​​​​​​​​​​​​​​​​​​​
```
Expand Down Expand Up @@ -75,7 +76,7 @@ The last element to recieve the *click* event is *document*, this is where our `
### [.live()](http://api.jquery.com/live/) w/ context (Deprecated)
Introduced in jQuery v1.4

Passing the *context* as a second optional argument to the `$()` function has been supported since v1.0. However support for using this *context* with the `$.live()` method was not added until v1.4.
Passing the *context* as a second optional argument to the `$()` function has been supported since v1.0. However support for using this *context* with the `$.live()` method was not added until v1.4.

If we were take our previous `.live()` example and provide it the default *context*, it would look like:

Expand All @@ -100,7 +101,7 @@ In this instance when an `<li>` is clicked the event still bubbles all the way u
### [.delegate()](http://api.jquery.com/delegate/) (Deprecated)
First introduced in jQuery v1.4.2

The `.delegate()` method provides a clear difference between the *context* of where to attach delegated event handler, and the *selector* to match when the event bubbles up to the delegated element.
The `.delegate()` method provides a clear difference between the *context* of where to attach delegated event handler, and the *selector* to match when the event bubbles up to the delegated element.

```
$('#list').delegate('li', 'click', function(event){
Expand All @@ -112,7 +113,7 @@ $('#list').delegate('li', 'click', function(event){
### [.on()](http://api.jquery.com/on/)
First introduced in jQuery v1.7

The `on.()` method gives us a semantic approach for creating directly bound events as well as delegated events. It eliminates the need to use the deprecated`.bind()`, `.live()` and `.delegate()` methods, providing a single API for creating events.
The `on.()` method gives us a semantic approach for creating directly bound events as well as delegated events. It eliminates the need to use the deprecated`.bind()`, `.live()` and `.delegate()` methods, providing a single API for creating events.

```
$('#list').on('click', 'li', function(event){
Expand All @@ -122,4 +123,4 @@ $('#list').on('click', 'li', function(event){
```

### Summary
All of these ways of *event delegation* were innovative and considered a best practice at the time of their release. Depending on what version of jQuery you have implemented use the appropriate means of *event delegation*.
All of these ways of *event delegation* were innovative and considered a best practice at the time of their release. Depending on what version of jQuery you have implemented use the appropriate means of *event delegation*.