Every DOM element has events
that can trigger JavaScript.
Slide 3
Slide 3 text
Example Events
• Mouse click
• Mouse over and out
• Page or image load
• Form submit
• Keyboard keystroke
Slide 4
Slide 4 text
Inconsistent Across Browsers
http://www.quirksmode.org/dom/events/index.html
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
jQuery Events
Events without the cross-browser hangover
Slide 11
Slide 11 text
ready
Binds a function to be executed when the DOM is
ready to be traversed and manipulated
http://docs.jquery.com/Events/ready
Slide 12
Slide 12 text
// stuff right here will run immediately
$(document).ready(function() {
// anything in here will only
// run when the page first loads
});
// stuff right here will run immediately
Slide 13
Slide 13 text
This is needed when you run
JavaScript that is in different files or in
the of your HTML document.
Mouse and Keyboard
Related Events
click, double click, keydown, keyup, keypress,
mousedown, mouseenter, mouseleave, mousemove,
mouseout, mouseover, mouseup, scroll
Slide 16
Slide 16 text
bind
Bind a function to an event for all matched elements.
http://docs.jquery.com/Events/bind
Slide 17
Slide 17 text
get all a elements and bind to their
click event the anonymous function.
$('a').bind('click', function(event) {
alert('You just clicked a link!');
});
Slide 18
Slide 18 text
$('a').bind('click', function(event) {
this; // clark kent DOM element just like .each
$(this); // superman jQuery object
});
Slide 19
Slide 19 text
jQuery Event Object
Normalizes event object across browsers.
Guaranteed to be first argument to every bound function.
http://docs.jquery.com/Events/jQuery.Event
Slide 20
Slide 20 text
$('a').bind('click', function(event) {
event;
});
$('a').bind('click', function(evt) {
evt;
});
$('a').bind('click', function(e) {
e;
});
Name it whatever you want,
these are the common ones.
event, evt, e
Slide 21
Slide 21 text
Event Shortcuts
Slide 22
Slide 22 text
click
Binds a function to the click event of
each matched element
http://docs.jquery.com/Events/click#fn
http://teaching.johnnunemaker.com/capp-30550/examples/click-event/
Slide 23
Slide 23 text
$('#foo').click(function(event) {
alert('foo was clicked!');
});
$('#foo').bind('click', function(event) {
alert('foo was clicked!');
});
These are the same thing
Slide 24
Slide 24 text
double click
Binds a function to the double click
event of each matched element
http://docs.jquery.com/Events/dblclick#fn
http://teaching.johnnunemaker.com/capp-30550/examples/double-click-event/
Slide 25
Slide 25 text
$('#foo').dblclick(function(event) {
alert('foo was double clicked!');
});
$('#foo').bind('dblclick', function(event) {
alert('foo was double clicked!');
});
Slide 26
Slide 26 text
keypress
Binds a function to the keypress
event for each matched element
http://docs.jquery.com/Events/keypress#fn
http://teaching.johnnunemaker.com/capp-30550/examples/keypress-event/
Slide 27
Slide 27 text
$('#foo').keypress(function(event) {
alert('key pressed in #foo');
});
$('#foo').bind('keypress', function(event) {
alert('key pressed in #foo');
});
Slide 28
Slide 28 text
mouseover/mouseout
Bind a function to the mouseover or
mouseout event of each matched element.
http://docs.jquery.com/Events/mouseover#fn
http://docs.jquery.com/Events/mouseout#fn
http://teaching.johnnunemaker.com/capp-30550/examples/mouseovermouseout/
mousemove
Bind a function to the mousemove
event of each matched element.
http://docs.jquery.com/Events/mousemove#fn
http://teaching.johnnunemaker.com/capp-30550/examples/mousemove-event/
scroll
Bind a function to when document view is scrolled
http://docs.jquery.com/Events/scroll#fn
http://teaching.johnnunemaker.com/capp-30550/examples/scroll-event/