Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Events
Search
John Nunemaker
PRO
November 15, 2010
Programming
3
430
Events
The pain that is JavaScript events done easily using jQuery.
John Nunemaker
PRO
November 15, 2010
Tweet
Share
More Decks by John Nunemaker
See All by John Nunemaker
Atom
jnunemaker
PRO
10
4.2k
MongoDB for Analytics
jnunemaker
PRO
11
910
Addicted to Stable
jnunemaker
PRO
32
2.5k
MongoDB for Analytics
jnunemaker
PRO
21
2.2k
MongoDB for Analytics
jnunemaker
PRO
16
30k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Why NoSQL?
jnunemaker
PRO
10
930
Don't Repeat Yourself, Repeat Others
jnunemaker
PRO
7
3.4k
I Have No Talent
jnunemaker
PRO
14
960
Other Decks in Programming
See All in Programming
はじめてのPDFKit.pdf
shomakato
0
110
ComposeでのPicture in Picture
takathemax
0
140
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
150
M5UnitUnified 最新動向 2025/05
gob
0
140
Vibe Coding の話をしよう
schroneko
14
3.9k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
290
Browser and UI #2 HTML/ARIA
ken7253
2
190
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
Носок на сок
bo0om
0
1.4k
Rubyの!メソッドをちゃんと理解する
alstrocrack
2
380
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
Serving TUIs over SSH with Go
caarlos0
0
770
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
A better future with KSS
kneath
239
17k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Speed Design
sergeychernyshev
29
940
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
How GitHub (no longer) Works
holman
314
140k
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
• Page or image load • Form submit • Keyboard keystroke
Inconsistent Across Browsers http://www.quirksmode.org/dom/events/index.html
None
None
None
None
None
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 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
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 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
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/