t-talk. javascript. jquery. custom events. namics. thomas junghans. frontend engineer. 12 th august...
TRANSCRIPT
T-Talk. Javascript. JQuery.Custom Events. Namics.
Thomas Junghans. Frontend Engineer.
12th August 2009
Namics.
Contents
Definition
Why use?
jQuery helps
Example
Links
18/04/23 Denken. Präsentieren. Umsetzen.2
Namics.
Definition of [custom] events
18/04/23 3 Denken. Präsentieren. Umsetzen.
Namics.
Definition of [custom] events
Javascript’s interaction with HTML is handled through events
Events are “interesting moments” during the life time of an application.
Custom events are events created by ourselves.
18/04/23 4 Denken. Präsentieren. Umsetzen.
Namics.
Definition of [custom] events
Events you already know:
18/04/23 5 Denken. Präsentieren. Umsetzen.
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.6
load
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.7
click
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.8
submit
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.9
focus
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.10
blur
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.11
mouseover
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.12
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html
Namics.
Definition of [custom] events
Examples of custom events:
18/04/23 13 Denken. Präsentieren. Umsetzen.
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.14
onColourChange
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.15
onItemAdded
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.16
onSliderMove
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.17
onMaxValueReached
Namics.
Definition of [custom] events
18/04/23 Denken. Präsentieren. Umsetzen.18
Note the “on” prefix
Namics.
Why use custom events?
18/04/23 19 Denken. Präsentieren. Umsetzen.
Namics.
Why use custom events?
Using custom events makes your code become
Easier to maintain
Improved readability. Easier for other developers to dig into.
Easier to debug
Finding the issue is a lot easier, since we’re not looking at spaghetti code
Easier to change and extend
Adding new actions to events is much much easier
Changing an action without disturbing another is less of a hassle
18/04/23 20 Denken. Präsentieren. Umsetzen.
Namics.
Why use custom events?
18/04/23 Denken. Präsentieren. Umsetzen.21
Easier = I can go home earlier
Namics.
Why use custom events?
18/04/23 Denken. Präsentieren. Umsetzen.22
While making life easier, you’re improving code quality
Namics.
Why use custom events?
Custom events also improve code quality
Observer pattern
The binded event is the event being observed (watched) or subscribed to.
Loose Coupling
Less dependencies between code blocks
Inversion of Control
Let the events control the flow of the application
Hollywood Principle: “Don’t call us, we’ll call you”.
18/04/23 23 Denken. Präsentieren. Umsetzen.
Namics.
jQuery helps
18/04/23 24 Denken. Präsentieren. Umsetzen.
Namics.
jQuery helps
The browser event system is a complex one
IE handles events differently (bubbling vs capture)
Let‘s keep it simple and easy
Use jQuery „trigger“ and „bind“
This can of course be done with other js libraries such as YUI
18/04/23 25 Denken. Präsentieren. Umsetzen.
Namics.
jQuery helps
18/04/23 26 Denken. Präsentieren. Umsetzen.
Namics.
jQuery helps
18/04/23 27 Denken. Präsentieren. Umsetzen.
What you need to know
Namics.
jQuery helps
18/04/23 28 Denken. Präsentieren. Umsetzen.
$(‘selector’).trigger(‘onMyEvent’)
Namics.
jQuery helps
18/04/23 29 Denken. Präsentieren. Umsetzen.
$(‘selector’).bind(‘onMyEvent’, function() {
// do something}
);
Namics.
jQuery helps
18/04/23 30 Denken. Präsentieren. Umsetzen.
That’s it!
Namics.
Example
18/04/23 31 Denken. Präsentieren. Umsetzen.
Namics.
Example
http://thomas.junghans.co.za/frontendengineering/javascript-custom-events-jquery/
18/04/23 32 Denken. Präsentieren. Umsetzen.
Namics.
Thank. You. Questions?
© Namics
18/04/23 33 Denken. Präsentieren. Umsetzen.
18/04/23 34 Denken. Präsentieren. Umsetzen.