JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events...
-
Upload
stanley-holland -
Category
Documents
-
view
228 -
download
0
Transcript of JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events...
![Page 1: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/1.jpg)
jQuery EventsSchulung
![Page 2: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/2.jpg)
Übersicht
• Events?• Strucktur
– Grundlage– Event handlers– Custom events– Tipps und Tricks
• Ausblick und Ende
![Page 3: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/3.jpg)
![Page 4: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/4.jpg)
Javascript Event-Loop
Single-thread
AktionAktion
AktionAktion
AktionFertigeAktion
![Page 5: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/5.jpg)
Javascript Function
Funktion Viele Kram Callback
![Page 6: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/6.jpg)
Callback
![Page 7: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/7.jpg)
Callback – Pyramid of Doom
![Page 8: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/8.jpg)
Javascript Event-Loop
Single-thread
AktionAktion
AktionAktion
AktionAktion AktionAktionAktionAktion
![Page 9: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/9.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Browser Events
Document Loading
Form Events
Kayboard Events
Mouse Events
Event Handler Attachment
Event Object
![Page 10: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/10.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Browser Events
• .error()• .resize()• .scroll()
![Page 11: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/11.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Document Loading
• .load()• .ready()• .unload()
![Page 12: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/12.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Form Events• .blur()• .change()• .focus()• .focusin()• .focusout()• .select()• .submit()
![Page 13: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/13.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Keyboard Events
• .keydown()• .keypress()• .keyup()
![Page 14: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/14.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events
• .click()• .dbclick()• .hover()• .mousedown() / .mouseup()• .mouseenter() / .mouseleave / .mouseover()• .toggle()
![Page 15: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/15.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events• .bind() / .unbind()• .live() / .die()• jQuey.proxy()• .delegate() / .undelegate()• .on() / .off() / .one()• .trigger()• .triggerHandler()
![Page 16: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/16.jpg)
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events
• .bind() / .unbind()• .live() / .die() (1.7)• .delegate() / .undelegate()• .on() / .off() / .one()• .trigger()• .triggerHandler()
![Page 17: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/17.jpg)
• .on(‘event.namespace’,’delegation’,{data},handler)
• .off(‘event.namespace’,’delegation’,{data},handler)
• .one(‘event.namespace’,’delegation’,{data},handler)
Grundfunktionen
Source: http://api.jquery.com/category/events/
![Page 18: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/18.jpg)
• Bind an den Eltern Element
• Akzept dynamik generierte Elemente
• Bubbling Effect
• Event Object
– event.target
– event.currentTarget
– event.data
– this
– event.preventDefault()
– event.stopPropagation()
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: http://api.jquery.com/category/events/
![Page 19: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/19.jpg)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
![Page 20: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/20.jpg)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
![Page 21: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/21.jpg)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: LINDLEY, Cody. jQuery Cookbook, 2010
![Page 22: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/22.jpg)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: http://api.jquery.com/category/events/
![Page 23: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/23.jpg)
![Page 24: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/24.jpg)
• .function(event) { }
• Event Object
– event.target
– event.currentTarget
– event.data
– this
– event.preventDefault()
– event.stopPropagation()
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: http://api.jquery.com/category/events/
![Page 25: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/25.jpg)
Custom Events• jQuery.Event Object einbauen (optional)
• bind .on(‚myevent.mynamespace‘, handler)• Trigger mit
– $.trigger(‚myevent‘) [Global]– $.fn.trigger(‚myevent‘) [Targeted]
![Page 26: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/26.jpg)
jQuery Plugin
• Ein paar Seiten dazu vielleicht?• http://learn.jquery.com/plugins/ (jQuery
Documentation)• Step-by-Step Simple Plugin: http://
blog.teamtreehouse.com/writing-your-own-jquery-plugins (Einfach Beispiel)
• http://www.smashingmagazine.com/2011/10/essential-jquery-plugin-patterns/ (Mehr über $.extend )
![Page 27: JQuery Events Schulung. Übersicht Events? Strucktur –Grundlage –Event handlers –Custom events –Tipps und Tricks Ausblick und Ende.](https://reader030.fdocument.pub/reader030/viewer/2022032612/56649ecd5503460f94bda224/html5/thumbnails/27.jpg)
Ende
Danke für‘s zuhören