Events

Events Responding to user actions in awesome ways

Every DOM element has events that can trigger JavaScript.

Example Events • Mouse click • Mouse over and out
• Page or image load • Form submit • Keyboard keystroke

Inconsistent Across Browsers http://www.quirksmode.org/dom/events/index.html

jQuery Events Events without the cross-browser hangover

ready Binds a function to be executed when the DOM
is ready to be traversed and manipulated http://docs.jquery.com/Events/ready

// 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

This is needed when you run JavaScript that is in
different ﬁles or in the <head> of your HTML document.

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/

Mouse and Keyboard Related Events click, double click, keydown, keyup,
keypress, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, scroll

bind Bind a function to an event for all matched
elements. http://docs.jquery.com/Events/bind

get all a elements and bind to their click event
the anonymous function. $('a').bind('click', function(event) { alert('You just clicked a link!'); });

$('a').bind('click', function(event) { this; // clark kent DOM element just
like .each $(this); // superman jQuery object });

jQuery Event Object Normalizes event object across browsers. Guaranteed to
be ﬁrst argument to every bound function. http://docs.jquery.com/Events/jQuery.Event

$('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

Event Shortcuts

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/

$('#foo').click(function(event) { alert('foo was clicked!'); }); $('#foo').bind('click', function(event) { alert('foo
was clicked!'); }); These are the same thing

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/

$('#foo').dblclick(function(event) { alert('foo was double clicked!'); }); $('#foo').bind('dblclick', function(event) {
alert('foo was double clicked!'); });

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/

$('#foo').keypress(function(event) { alert('key pressed in #foo'); }); $('#foo').bind('keypress', function(event) {
alert('key pressed in #foo'); });

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/

$('#foo').mouseover(function(event) { alert('i haz ur mouse'); }); $('#foo').mouseover(function(event) { alert('ur
mouse escaped'); });

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/

$('#foo').mousemove(function(event) { $(this).text('x: ' + event.pageX + ' y: '
+ event.pageY); });

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/

$(window).scroll(function(event) { alert('you scrolled'); });

Assignment11 http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-events/

Events

Events

John Nunemaker PRO

More Decks by John Nunemaker

Other Decks in Programming

Featured

Transcript

Events Responding to user actions in awesome ways

Every DOM element has events that can trigger JavaScript.

Example Events • Mouse click • Mouse over and out

Inconsistent Across Browsers http://www.quirksmode.org/dom/events/index.html

jQuery Events Events without the cross-browser hangover

ready Binds a function to be executed when the DOM

// stuff right here will run immediately $(document).ready(function() { //

This is needed when you run JavaScript that is in

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/

Mouse and Keyboard Related Events click, double click, keydown, keyup,

bind Bind a function to an event for all matched

get all a elements and bind to their click event

$('a').bind('click', function(event) { this; // clark kent DOM element just

jQuery Event Object Normalizes event object across browsers. Guaranteed to

$('a').bind('click', function(event) { event; }); $('a').bind('click', function(evt) { evt; });

Event Shortcuts

click Binds a function to the click event of each

$('#foo').click(function(event) { alert('foo was clicked!'); }); $('#foo').bind('click', function(event) { alert('foo

double click Binds a function to the double click event

$('#foo').dblclick(function(event) { alert('foo was double clicked!'); }); $('#foo').bind('dblclick', function(event) {

keypress Binds a function to the keypress event for each

$('#foo').keypress(function(event) { alert('key pressed in #foo'); }); $('#foo').bind('keypress', function(event) {

mouseover/mouseout Bind a function to the mouseover or mouseout event

$('#foo').mouseover(function(event) { alert('i haz ur mouse'); }); $('#foo').mouseover(function(event) { alert('ur

mousemove Bind a function to the mousemove event of each

$('#foo').mousemove(function(event) { $(this).text('x: ' + event.pageX + ' y: '

scroll Bind a function to when document view is scrolled

$(window).scroll(function(event) { alert('you scrolled'); });

Assignment11 http://teaching.johnnunemaker.com/capp-30550/sessions/jquery-events/