Upload
john-nunemaker
View
3.651
Download
0
Embed Size (px)
DESCRIPTION
Introduction to jQuery events.
Citation preview
EventsResponding to user actions in awesome ways
Thursday, November 12, 2009
Every DOM element has events that can trigger JavaScript.
Thursday, November 12, 2009
Example Events
• Mouse click
• Mouse over and out
• Page or image load
• Form submit
• Keyboard keystroke
Thursday, November 12, 2009
Inconsistent Across Browsershttp://www.quirksmode.org/dom/events/index.html
Thursday, November 12, 2009
Thursday, November 12, 2009
Thursday, November 12, 2009
Thursday, November 12, 2009
Thursday, November 12, 2009
Thursday, November 12, 2009
jQuery EventsEvents without the cross-browser hangover
Thursday, November 12, 2009
readyBinds a function to be executed when the DOM is
ready to be traversed and manipulated
http://docs.jquery.com/Events/ready
Thursday, November 12, 2009
// 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
Thursday, November 12, 2009
This is needed when you run JavaScript that is in different files or in the <head> of your HTML document.
Thursday, November 12, 2009
Demos
http://teaching.johnnunemaker.com/capp-30550/examples/page-load-win/
http://teaching.johnnunemaker.com/capp-30550/examples/page-load-fail/
http://teaching.johnnunemaker.com/capp-30550/examples/page-load-from-external-javascript/
Thursday, November 12, 2009
Mouse and Keyboard Related Events
click, double click, keydown, keyup, keypress, mousedown, mouseenter, mouseleave, mousemove,
mouseout, mouseover, mouseup, scroll
Thursday, November 12, 2009
bindBind a function to an event for all matched elements.
http://docs.jquery.com/Events/bind
Thursday, November 12, 2009
get all a elements and bind to their click event the anonymous function.
$('a').bind('click', function(event) { alert('You just clicked a link!');});
Thursday, November 12, 2009
$('a').bind('click', function(event) { this; // clark kent DOM element just like .each $(this); // superman jQuery object});
Thursday, November 12, 2009
jQuery Event ObjectNormalizes event object across browsers.
Guaranteed to be first argument to every bound function.http://docs.jquery.com/Events/jQuery.Event
Thursday, November 12, 2009
$('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
Thursday, November 12, 2009
Event Shortcuts
Thursday, November 12, 2009
clickBinds a function to the click event of
each matched elementhttp://docs.jquery.com/Events/click#fn
http://teaching.johnnunemaker.com/capp-30550/examples/click-event/
Thursday, November 12, 2009
$('#foo').click(function(event) { alert('foo was clicked!');});
$('#foo').bind('click', function(event) { alert('foo was clicked!');});
These are the same thing
Thursday, November 12, 2009
double clickBinds a function to the double click
event of each matched elementhttp://docs.jquery.com/Events/dblclick#fn
http://teaching.johnnunemaker.com/capp-30550/examples/double-click-event/
Thursday, November 12, 2009
$('#foo').dblclick(function(event) { alert('foo was double clicked!');});
$('#foo').bind('dblclick', function(event) { alert('foo was double clicked!');});
Thursday, November 12, 2009
keypressBinds 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/
Thursday, November 12, 2009
$('#foo').keypress(function(event) { alert('key pressed in #foo');});
$('#foo').bind('keypress', function(event) { alert('key pressed in #foo');});
Thursday, November 12, 2009
mouseover/mouseoutBind 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/
Thursday, November 12, 2009
$('#foo').mouseover(function(event) { alert('i haz ur mouse');});
$('#foo').mouseover(function(event) { alert('ur mouse escaped');});
Thursday, November 12, 2009
mousemoveBind 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/
Thursday, November 12, 2009
$('#foo').mousemove(function(event) { $(this).text('x: ' + event.pageX + ' y: ' + event.pageY);});
Thursday, November 12, 2009
scrollBind a function to when document view is scrolled
http://docs.jquery.com/Events/scroll#fn
http://teaching.johnnunemaker.com/capp-30550/examples/scroll-event/
Thursday, November 12, 2009
$(window).scroll(function(event) { alert('you scrolled');});
Thursday, November 12, 2009
Assignment11http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-events/
Thursday, November 12, 2009