Skip to content

Commit 107ffef

Browse files
committed
Handling Events: Cleanup
1 parent de4856b commit 107ffef

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

page/events/handling-events.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ source: http://jqfundamentals.com/legacy
55
attribution:
66
- jQuery Fundamentals
77
---
8+
89
jQuery provides a method `.on()` to
910
respond to any event on the selected elements. This is called an _event binding_.
1011
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).
1415
The `.on()` method provides several useful features:
1516

1617
- [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)
2223

2324
### Examples
2425

25-
#### <a name="simple-event-binding">Simple event binding</a>
26+
#### Simple event binding
27+
2628
```
2729
// When any <p> tag is clicked, we expect to see '<p> was clicked' in the console.
2830
$( "p" ).on( "click", function() {
2931
console.log( "<p> was clicked" );
3032
});
3133
```
3234

33-
#### <a name="multiple-events-one-handler">Many events, but only one event handler</a>
35+
#### Many events, but only one event handler
3436

3537
Suppose you want to trigger the same event whenever the mouse hovers over or leaves
3638
the selected elements. The best practice for this is to use "mouseenter mouseleave".
3739
Note the difference between this and the next example.
3840

3941
```
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
4244
$( "div" ).on( "mouseenter mouseleave", function() {
4345
console.log( "mouse hovered over or left a div" );
4446
});
4547
```
4648

47-
#### <a name="multiple-events-multiple-handlers">Many events and handlers</a>
49+
#### Many events and handlers
4850

4951
Suppose that instead you want different event handlers for when the mouse enters and
5052
leaves an element. This is more common than the previous example. For example, if you
@@ -66,7 +68,7 @@ $( "div" ).on({
6668
});
6769
```
6870

69-
#### <a name="event-object">The event object</a>
71+
#### The event object
7072

7173
Handling events can be tricky. It's often helpful to use the extra information contained
7274
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 ) {
8082
});
8183
```
8284

83-
#### <a name="passing-data">Passing data to the event handler</a>
85+
#### Passing data to the event handler
8486

8587
You can pass your own data to the event object.
8688

@@ -93,7 +95,7 @@ $( "p" ).on( "click", {
9395
```
9496

9597

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
9799

98100
This is called _event delegation_. Here's an example just for completeness, but see the
99101
page on [Event Delegation](/events/event-delegation/) for a full explanation.

0 commit comments

Comments
 (0)