Skip to content

Commit 551a5ab

Browse files
committed
Merge branch 'master' of github.com:jquery/learn.jquery.com
2 parents 770c60e + b47c2bf commit 551a5ab

File tree

2 files changed

+14
-9
lines changed

2 files changed

+14
-9
lines changed

CONTRIBUTING.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,8 @@ If the article was pulled in from an outside source you also need to add an attr
6060

6161
## How do I get credit for my contribution?
6262

63-
We will build the attribution of an article based on the git commit logs. Only use the attribution meta tag to give credit to authors outside of git for an article that was pulled in for instance.
63+
We will build the attribution of an article based on the git commit logs. Only use the attribution meta tag to give credit to authors outside of git for an article that was pulled in for instance.
64+
65+
Writing Style Guide
66+
67+
The jQuery Learning Site uses the [same style guide as the jQuery Documentation team](https://github.com/jquery/api.jquery.com#style-guidelines). If you have questions which are not addressed by this style guide, please refer to [idiomatic.js](https://github.com/rwldrn/idiomatic.js/).

page/events/history-of-events.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
2-
title : History of jQuery Events
2+
title: History of jQuery Events
3+
level: intermediate
34
---
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+
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.
56

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

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

2526
```
2627
​$('#list li').bind('click', function(event){
27-
console.log( $elem.text() );
28+
console.log( $elem.text() );
2829
});​​​​​​​​​​​​​​​​​​​​​
2930
```
3031
As discussed in the [event delegation](/event/event-delegation) article, this is not optimal.
@@ -42,7 +43,7 @@ Generally we don't associate `.bind()` with *event delegation*, however prior to
4243
​$('#list').bind('click', function(event){
4344
var $elem = $(event.target);
4445
if( $elem.is("li") ){
45-
console.log( $elem.text() );
46+
console.log( $elem.text() );
4647
}
4748
});​​​​​​​​​​​​​​​​​​​​​
4849
```
@@ -75,7 +76,7 @@ The last element to recieve the *click* event is *document*, this is where our `
7576
### [.live()](http://api.jquery.com/live/) w/ context (Deprecated)
7677
Introduced in jQuery v1.4
7778

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+
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.
7980

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

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

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+
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.
104105

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

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+
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.
116117

117118
```
118119
$('#list').on('click', 'li', function(event){
@@ -122,4 +123,4 @@ $('#list').on('click', 'li', function(event){
122123
```
123124

124125
### 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*.
126+
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)