Skip to content

Commit 180c721

Browse files
bentonambentonam
committed
resolves #129 
1 parent 843ef40 commit 180c721

File tree

2 files changed

+126
-0
lines changed

2 files changed

+126
-0
lines changed

‎order.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
- working_with_events_part_2
4444
- triggering-event-handlers
4545
- introduction-to-custom-events
46+
- history-of-events
4647
- effects:
4748
- built-in-effects
4849
- custom-effects

‎page/events/history-of-events.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title : History of jQuery Events
3+
---
4+
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.
5+
6+
Given the following html, for our example we want to log the text of the each `<li>` to console whenever it is clicked.
7+
8+
```
9+
<div id="container">
10+
<ul id="list">
11+
<li>Item #1</li>
12+
<li>Item #2</li>
13+
<li>Item #3</li>
14+
<li>...</li>
15+
<li>Item #100</li>
16+
</ul>
17+
</div>​
18+
```
19+
20+
### [.bind()](http://api.jquery.com/bind/) (Deprecated)
21+
Introduced in jQuery v1.0
22+
23+
It is possible to use `.bind()` and attach a handler to every element.
24+
25+
```
26+
​$('#list li').bind('click', function(event){
27+
console.log( $elem.text() );
28+
});​​​​​​​​​​​​​​​​​​​​​
29+
```
30+
As discussed in the [event delegation](/event/event-delegation) article, this is not optimal.
31+
32+
### liveQuery
33+
*liveQuery* was a popular jQuery plugin, that allowed for the creation of events which would be triggered for elements that existed now or in the future. This plugin did not use event delegation is used expensive CPU processing to poll the DOM for changes every 20ms and fire events accordingly.
34+
35+
36+
### [.bind()](http://api.jquery.com/bind/) delegation (Deprecated)
37+
Introduced in jQuery v1.0
38+
39+
Generally we don't associate `.bind()` with *event delegation*, however prior to jQuery v1.3 it was the only means of delegation available to us.
40+
41+
```
42+
​$('#list').bind('click', function(event){
43+
var $elem = $(event.target);
44+
if( $elem.is("li") ){
45+
console.log( $elem.text() );
46+
}
47+
});​​​​​​​​​​​​​​​​​​​​​
48+
```
49+
We are able to take advantage of *event bubbling* here by attaching a *click* event to the parent `<ul>` element. Whenever the `<li>` is clicked, the event bubbles up to its parent, the `<ul>`, which executes our event handler. Our event handler checks to see if the **event.target** (the element that caused the event to fire) matches our selector.
50+
51+
52+
### [.live()](http://api.jquery.com/live/) (Deprecated)
53+
Introduced in jQuery v1.3
54+
55+
All `.live()` event handlers are bound to the *document* root by default.
56+
57+
```
58+
​$('#list li').live('click', function(event){
59+
var $elem = $(this);
60+
console.log( $elem.text() );
61+
});​​​​​​​​​​​​​​​​​​​​​
62+
```
63+
64+
When we use `.live()` our event is bound to `$(document)`. When the `<li>` is clicked, bubbling occurs and our *click* event is fired for each of the following elements:
65+
66+
* `<ul>`
67+
* `<div>`
68+
* `<body>`
69+
* `<html>`
70+
* *document* root
71+
72+
The last element to recieve the *click* event is *document*, this is where our `.live()` event is bound. `.live()` will then check to see if our selector `#list li` is the element that triggered the event, if so our event handler is executed.
73+
74+
75+
### [.live()](http://api.jquery.com/live/) w/ context (Deprecated)
76+
Introduced in jQuery v1.4
77+
78+
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.
79+
80+
If we were take our previous `.live()` example and provide it the default *context*, it would look like:
81+
82+
```
83+
​$('#list li', document).live('click', function(event){
84+
var $elem = $(this);
85+
console.log( $elem.text() );
86+
});​​​​​​​​​​​​​​​​​​​​​
87+
```
88+
89+
Since we can override the *context* when using the `.live()` method, we can specify a *context* that is closer to the element in the DOM hierarchy
90+
91+
```
92+
$('li', '#list').live('click', function(event){
93+
var $elem = $(this);
94+
console.log( $elem.text() );
95+
});​​​​​​​​​​​​​​​​​​​​​
96+
```
97+
98+
In this instance when an `<li>` is clicked the event still bubbles all the way up the *document tree* as it did before. However, our event handler is now bound to the parent `<ul>` tag, so we do not have to wait for the event to bubble all the way up to the *document* root.
99+
100+
### [.delegate()](http://api.jquery.com/delegate/) (Deprecated)
101+
First introduced in jQuery v1.4.2
102+
103+
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.
104+
105+
```
106+
$('#list').delegate('li', 'click', function(event){
107+
var $elem = $(this);
108+
console.log( $elem.text() );
109+
});​​​​​​​​​​​​​​​​​​​​​
110+
```
111+
112+
### [.on()](http://api.jquery.com/on/)
113+
First introduced in jQuery v1.7
114+
115+
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.
116+
117+
```
118+
$('#list').on('click', 'li', function(event){
119+
var $elem = $(this);
120+
console.log( $elem.text() );
121+
});​​​​​​​​​​​​​​​​​​​​​
122+
```
123+
124+
### Summary
125+
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*.

0 commit comments

Comments
 (0)