Post on 01-Jan-2016
jQuery EventsSchulung
Übersicht
• Events?• Strucktur
– Grundlage– Event handlers– Custom events– Tipps und Tricks
• Ausblick und Ende
Javascript Event-Loop
Single-thread
AktionAktion
AktionAktion
AktionFertigeAktion
Javascript Function
Funktion Viele Kram Callback
Callback
Callback – Pyramid of Doom
Javascript Event-Loop
Single-thread
AktionAktion
AktionAktion
AktionAktion AktionAktionAktionAktion
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Browser Events
Document Loading
Form Events
Kayboard Events
Mouse Events
Event Handler Attachment
Event Object
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Browser Events
• .error()• .resize()• .scroll()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Document Loading
• .load()• .ready()• .unload()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Form Events• .blur()• .change()• .focus()• .focusin()• .focusout()• .select()• .submit()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Keyboard Events
• .keydown()• .keypress()• .keyup()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events
• .click()• .dbclick()• .hover()• .mousedown() / .mouseup()• .mouseenter() / .mouseleave / .mouseover()• .toggle()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events• .bind() / .unbind()• .live() / .die()• jQuey.proxy()• .delegate() / .undelegate()• .on() / .off() / .one()• .trigger()• .triggerHandler()
Struktur – Grundlage
Source: http://api.jquery.com/category/events/
Mouse Events
• .bind() / .unbind()• .live() / .die() (1.7)• .delegate() / .undelegate()• .on() / .off() / .one()• .trigger()• .triggerHandler()
• .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/
• 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/
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: LINDLEY, Cody. jQuery Cookbook, 2010
.on(‘event.namespace’ , ’delegation’ , {data} , handler)
Source: http://api.jquery.com/category/events/
• .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/
Custom Events• jQuery.Event Object einbauen (optional)
• bind .on(‚myevent.mynamespace‘, handler)• Trigger mit
– $.trigger(‚myevent‘) [Global]– $.fn.trigger(‚myevent‘) [Targeted]
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 )
Ende
Danke für‘s zuhören