@@ -108,24 +108,26 @@ We've learned in the previous lesson how to bind events on **click** by setting
108
108
<a href =" #" class =" done" onclick =" alert('Click event')" >Show an alert box</a >
109
109
```
110
110
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.
114
112
115
113
``` js
116
114
$ (document ).on (' click' ,' .done' , function () {
117
- alert (" Click event" );
115
+ alert (" Click event" );
118
116
});
119
117
```
120
118
121
- There are two differences between these examples:
119
+ Although these two examples do the same thing there are some differences.
122
120
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
127
122
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.
129
131
130
132
To create your own event listener choose an ` event ` to listen for on the
131
133
elements matching a ` selector ` . Then put the code you want to run each time the
0 commit comments