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
440
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
960
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
59
9.6k
Why NoSQL?
jnunemaker
PRO
10
960
Don't Repeat Yourself, Repeat Others
jnunemaker
PRO
7
3.5k
I Have No Talent
jnunemaker
PRO
14
990
Other Decks in Programming
See All in Programming
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Cursorハンズオン実践!
eltociear
2
1.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
910
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
SODA - FACT BOOK(JP)
sodainc
1
8.8k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
技術的負債の正体を知って向き合う
irof
0
260
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
チームの境界をブチ抜いていけ
tokai235
0
220
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Fireside Chat
paigeccino
41
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
A designer walks into a library…
pauljervisheath
209
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
A better future with KSS
kneath
239
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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/