jquery events

EventsResponding to user actions in awesome ways

Thursday, November 12, 2009

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 Browsershttp://www.quirksmode.org/dom/events/index.html


http://www.quirksmode.org/dom/events/index.html

http://www.quirksmode.org/dom/events/index.html

jQuery EventsEvents without the cross-browser hangover


readyBinds 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 files 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


bindBind 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 ObjectNormalizes event object across browsers.

Guaranteed to be first argument to every bound function.http://docs.jquery.com/Events/jQuery.Event


http://docs.jquery.com/Events/jQuery.Event

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


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/


http://docs.jquery.com/Events/click#fn

http://docs.jquery.com/Events/click#fn



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

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

These are the same thing


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/


http://docs.jquery.com/Events/dblclick#fn

http://docs.jquery.com/Events/dblclick#fn



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

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


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/






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

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


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/








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

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


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/


http://docs.jquery.com/Events/mousemove#fn

http://docs.jquery.com/Events/mousemove#fn



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


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/






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


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


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

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

jquery events

Technology