Skip to content

Commit 0a4a455

Browse files
Josh HillJosh Hill
authored andcommitted
Rework event listener intro
1 parent 2a1f174 commit 0a4a455

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

js/lesson3/tutorial.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -108,24 +108,26 @@ We've learned in the previous lesson how to bind events on **click** by setting
108108
<a href="#" class="done" onclick="alert('Click event')">Show an alert box</a>
109109
```
110110

111-
With jQuery we can achieve the same thing with an event listener. To listen for
112-
events anywhere on the page we attach the event listener to the document
113-
element.
111+
With jQuery we can achieve the same thing with an event listener.
114112

115113
```js
116114
$(document).on('click','.done', function() {
117-
alert("Click event");
115+
alert("Click event");
118116
});
119117
```
120118

121-
There are two differences between these examples:
119+
Although these two examples do the same thing there are some differences.
122120

123-
- This event listener will listen for `click` on all the elements with class
124-
`done`, i.e. one listener can listen to many elements.
125-
- jQuery's `on()` method is dynamic, so if we add new items to the page with
126-
class `done` the listener will listen to them as well.
121+
##Event listeners
127122

128-
**Handling events**
123+
- Event listeners are usually attached to the document element so they listen
124+
for events anywhere on the page.
125+
- The event listener uses a selector like `.done` to listen to specific
126+
elements. A selector can match more than one element, so one listener can
127+
listen to many elements.
128+
- jQuery's `on()` method is dynamic, so if we add elements to the page that
129+
match the selector, i.e. add an element with class `done`, then the listener
130+
will automatically listen to them too.
129131

130132
To create your own event listener choose an `event` to listen for on the
131133
elements matching a `selector`. Then put the code you want to run each time the

0 commit comments

Comments
 (0)