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
390
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
7
3.3k
MongoDB for Analytics
jnunemaker
PRO
8
680
Addicted to Stable
jnunemaker
PRO
32
2.1k
MongoDB for Analytics
jnunemaker
PRO
21
2.2k
MongoDB for Analytics
jnunemaker
PRO
16
29k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Why NoSQL?
jnunemaker
PRO
10
830
Don't Repeat Yourself, Repeat Others
jnunemaker
PRO
7
3.2k
I Have No Talent
jnunemaker
PRO
14
850
Other Decks in Programming
See All in Programming
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
600
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
2
220
Try creating your own orderedmap
kazamori
1
280
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
380
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.3k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
510
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.1k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
540
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
株式会社ゼネテック
genetec
0
110
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
What's in a price? How to price your products and services
michaelherold
238
11k
RailsConf 2023
tenderlove
9
570
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Designing for Performance
lara
601
67k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How to name files
jennybc
65
93k
For a Future-Friendly Web
brad_frost
172
9k
Documentation Writing (for coders)
carmenintech
60
4k
Atom: Resistance is Futile
akmur
260
25k
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/