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