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

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.

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

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

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

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

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

jquery events

Technology

jquery jquery jquery jquery jquery

javascript lecture 3c (jquery) - github pages · jquery...

api jquery com jquery ajax

files.isec.ptfiles.isec.pt/.../javasript-jquery-2ed_mcfarland.pdf ·...

jquery - webstepbook.com · jquery terminology the jquery...

introduction to jquery jquery syntax css attribute ... ·...

jquery - ncet.co.in€¦ · jquery contains powerful...

jquery.pdf -...

selectors - attributes css - manipulation - … - attributes...

jquery sans jquery

jquery for beginners - jquery conference 2009

jquery fundamentals · jquery fundamentals rebecca murphey...

jquery, ecsstender & you [jquery summit 2010]

jquery, jquery ui et jquery...

writing reusable web components with jquery and jquery ui

jquery- one slide completing all jquery

jquery & jquery mobile

learning jquery 1 - packt publishing · learning jquery 1.3...

javascript jquery jquery ui

jquery, jquery ui, and jquery mobile: recipes -