Skip to content

Commit 97e08b9

Browse files
committed
Merge branch 'master' of github.com:jquery/web-learn-jquery-com
* 'master' of github.com:jquery/web-learn-jquery-com: start of events section
2 parents 007753e + c5cc1a1 commit 97e08b9

File tree

3 files changed

+127
-0
lines changed

3 files changed

+127
-0
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
chapter : events
3+
section : 1
4+
title : Overview
5+
attribution: jQuery Fundamentals
6+
---
7+
## Overview
8+
9+
jQuery provides simple methods for attaching event handlers to selections.
10+
When an event occurs, the provided function is executed.
11+
Inside the function, this refers to the element that was clicked.
12+
13+
For details on jQuery events, visit [http://api.jquery.com/category/events/](http://api.jquery.com/category/events/ "Events documentation on api.jquery.com").
14+
15+
The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event’s default behavior.
16+
17+
For details on the event object, visit [http://api.jquery.com/category/events/event-object/](http://api.jquery.com/category/events/event-object/ "Event object documentation on api.jquery.com").
Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
chapter : events
3+
section : 2
4+
title : Connecting Events to Elements
5+
attribution: jQuery Fundamentals
6+
---
7+
## Connecting Events to Elements
8+
9+
jQuery offers convenience methods for most common events, and these are the methods you will see used most often.
10+
These methods — including `$.fn.click`, `$.fn.focus`, `$.fn.blur`, `$.fn.change`, etc. — are shorthand for jQuery's `$.fn.bind` method.
11+
The bind method is useful for binding the same handler function to multiple events, when you want to provide data to the event hander, when you are working with custom events, or when you want to pass an object of multiple events and handlers.
12+
13+
<div class="example" markdown="1">
14+
Event binding using a convenience method
15+
16+
$('p').click(function() {
17+
console.log('click');
18+
});
19+
</div>
20+
21+
<div class="example" markdown="1">
22+
Event biding using the `$.fn.bind` method
23+
24+
$('p').bind('click', function() {
25+
console.log('click');
26+
});
27+
</div>
28+
29+
<div class="example" markdown="1">
30+
Event binding using the `$.fn.bind` method with data
31+
32+
$('input').bind(
33+
'click change', // bind to multiple events
34+
{ foo : 'bar' }, // pass in data
35+
36+
function(eventObject) {
37+
console.log(eventObject.type, eventObject.data);
38+
// logs event type, then { foo : 'bar' }
39+
}
40+
);
41+
</div>
42+
43+
### Connecting Events to Run Only Once
44+
45+
Sometimes you need a particular handler to run only once — after that, you may want no handler to run, or you may want a different handler to run.
46+
jQuery provides the `$.fn.one` method for this purpose.
47+
48+
<div class="example" markdown="1">
49+
Switching handlers using the `$.fn.one` method
50+
51+
$('p').one('click', function() {
52+
console.log('You just clicked this for the first time!');
53+
$(this).click(function() { console.log('You have clicked this before!'); });
54+
});
55+
</div>
56+
57+
The `$.fn.one` method is especially useful if you need to do some complicated setup the first time an element is clicked, but not subsequent times.
58+
59+
### Disconnecting Events
60+
61+
To disconnect an event handler, you use the `$.fn.unbind` method and pass in the event type to unbind.
62+
If you attached a named function to the event, then you can isolate the unbinding to that named function by passing it as the second argument.
63+
64+
<div class="example" markdown="1">
65+
Unbinding all click handlers on a selection
66+
67+
$('p').unbind('click');
68+
</div>
69+
70+
<div class="example" markdown="1">
71+
Unbinding a particular click handler
72+
73+
var foo = function() { console.log('foo'); };
74+
var bar = function() { console.log('bar'); };
75+
76+
$('p').bind('click', foo).bind('click', bar);
77+
$('p').unbind('click', bar); // foo is still bound to the click event
78+
</div>
79+
80+
### Namespacing Events
81+
82+
For complex applications and for plugins you share with others, it can be useful to namespace your events so you don't unintentionally disconnect events that you didn't or couldn't know about.
83+
84+
<div class="example" markdown="1">
85+
Namespacing events
86+
87+
$('p').bind('click.myNamespace', function() { /* ... */ });
88+
$('p').unbind('click.myNamespace');
89+
$('p').unbind('.myNamespace'); // unbind all events in the namespace
90+
</div>
91+
92+
### Binding Multiple Events
93+
94+
Quite often elements in your application will be bound to multiple events, each having a different function for handing the event.
95+
In these cases you can pass an object into `$.fn.bind` with one or more key/value pairs, with the key being the event name and the value being the function to handle the event.
96+
97+
<div class="example" markdown="1">
98+
Binding Multiple Events
99+
100+
$('p').bind({
101+
'click': function() { console.log('clicked!'); },
102+
'mouseover': function() { console.log('hovered!'); }
103+
});
104+
</div>
105+
106+
<div class="note" markdown="1">
107+
### Note
108+
109+
The option to pass an object of multiple events and handlers to $.fn.bind was introduced in jQuery 1.4.4.
110+
</div>

content/jquery-fundamentals/events/inside-event-handling-function.md

Whitespace-only changes.

0 commit comments

Comments
 (0)