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.2k
MongoDB for Analytics
jnunemaker
PRO
8
660
Addicted to Stable
jnunemaker
PRO
32
2.1k
MongoDB for Analytics
jnunemaker
PRO
21
2.1k
MongoDB for Analytics
jnunemaker
PRO
16
29k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Why NoSQL?
jnunemaker
PRO
10
800
Don't Repeat Yourself, Repeat Others
jnunemaker
PRO
7
3.1k
I Have No Talent
jnunemaker
PRO
14
840
Other Decks in Programming
See All in Programming
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
830
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
1.8k
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
9.9k
ONE WEDGE_Company_Information
1wedge
0
160
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
260
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
940
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
TCA魔法学入門🪄
dazy
0
280
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
18k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Gamification - CAS2011
davidbonilla
76
4.5k
Docker and Python
trallard
33
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Code Reviewing Like a Champion
maltzj
512
39k
Atom: Resistance is Futile
akmur
258
25k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
A designer walks into a library…
pauljervisheath
199
23k
Statistics for Hackers
jakevdp
789
220k
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/