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.3k
MongoDB for Analytics
jnunemaker
PRO
11
930
Addicted to Stable
jnunemaker
PRO
32
2.6k
MongoDB for Analytics
jnunemaker
PRO
21
2.3k
MongoDB for Analytics
jnunemaker
PRO
16
30k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Why NoSQL?
jnunemaker
PRO
10
940
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
技術同人誌をMCP Serverにしてみた
74th
1
440
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
190
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
ふつうの技術スタックでアート作品を作ってみる
akira888
0
190
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
590
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Language of Interfaces
destraynor
158
25k
Making Projects Easy
brettharned
116
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fireside Chat
paigeccino
37
3.5k
Designing for Performance
lara
609
69k
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/