@@ -5,6 +5,7 @@ source: http://jqfundamentals.com/legacy
5
5
attribution :
6
6
- jQuery Fundamentals
7
7
---
8
+
8
9
jQuery provides a method ` .on() ` to
9
10
respond to any event on the selected elements. This is called an _ event binding_ .
10
11
Although ` .on() ` isn't the only method provided for event binding, it is a best
@@ -14,37 +15,38 @@ the evolution of event binding in jQuery](/events/history-of-events).
14
15
The ` .on() ` method provides several useful features:
15
16
16
17
- [ Bind any event triggered on the selected elements to an event handler] ( #simple-event-binding )
17
- - [ Bind multiple events to one event handler] ( #multiple -events-one-handler )
18
- - [ Bind multiple events and multiple handlers to the selected elements] ( #multiple -events-multiple -handlers )
19
- - [ Use details about the event in the event handler] ( #event-object )
20
- - [ Pass data to the event handler for custom events] ( #passing-data )
21
- - [ Bind events to elements that will be rendered in the future] ( #event-delegation )
18
+ - [ Bind multiple events to one event handler] ( #many -events-but-only- one-event -handler )
19
+ - [ Bind multiple events and multiple handlers to the selected elements] ( #many -events-and -handlers )
20
+ - [ Use details about the event in the event handler] ( #the- event-object )
21
+ - [ Pass data to the event handler for custom events] ( #passing-data-to-the-event-handler )
22
+ - [ Bind events to elements that will be rendered in the future] ( #binding-events-to-elements-that-don-39-t-exist-yet )
22
23
23
24
### Examples
24
25
25
- #### <a name =" simple-event-binding " >Simple event binding</a >
26
+ #### Simple event binding
27
+
26
28
```
27
29
// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
28
30
$( "p" ).on( "click", function() {
29
31
console.log( "<p> was clicked" );
30
32
});
31
33
```
32
34
33
- #### < a name = " multiple-events-one-handler " > Many events, but only one event handler</ a >
35
+ #### Many events, but only one event handler
34
36
35
37
Suppose you want to trigger the same event whenever the mouse hovers over or leaves
36
38
the selected elements. The best practice for this is to use "mouseenter mouseleave".
37
39
Note the difference between this and the next example.
38
40
39
41
```
40
- // When a user focuses on or changes any input element, we expect a console message
41
- // bind to multiple events
42
+ // When a user focuses on or changes any input element,
43
+ // we expect a console message bind to multiple events
42
44
$( "div" ).on( "mouseenter mouseleave", function() {
43
45
console.log( "mouse hovered over or left a div" );
44
46
});
45
47
```
46
48
47
- #### < a name = " multiple-events-multiple-handlers " > Many events and handlers</ a >
49
+ #### Many events and handlers
48
50
49
51
Suppose that instead you want different event handlers for when the mouse enters and
50
52
leaves an element. This is more common than the previous example. For example, if you
@@ -66,7 +68,7 @@ $( "div" ).on({
66
68
});
67
69
```
68
70
69
- #### < a name = " event-object " > The event object</ a >
71
+ #### The event object
70
72
71
73
Handling events can be tricky. It's often helpful to use the extra information contained
72
74
in the event object passed to the event handler for more control. To become familiar with
@@ -80,7 +82,7 @@ $( "div" ).on( "click", function( event ) {
80
82
});
81
83
```
82
84
83
- #### < a name = " passing-data " > Passing data to the event handler</ a >
85
+ #### Passing data to the event handler
84
86
85
87
You can pass your own data to the event object.
86
88
@@ -93,7 +95,7 @@ $( "p" ).on( "click", {
93
95
```
94
96
95
97
96
- #### < a name = " event-delegation " > Binding events to elements that don't exist yet</ a >
98
+ #### Binding events to elements that don't exist yet
97
99
98
100
This is called _ event delegation_ . Here's an example just for completeness, but see the
99
101
page on [ Event Delegation] ( /events/event-delegation/ ) for a full explanation.
0 commit comments