T-Talk. Javascript. JQuery. Custom Events. Namics. Thomas Junghans. Frontend Engineer. 12 th August 2009
Namics. Contents Definition Why use? jQuery helps Example Links 27/03/2015 Denken. Präsentieren. Umsetzen. 2
Namics. Definition of [custom] events 27/03/20153 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. 27/03/20154 Denken. Präsentieren. Umsetzen.
Namics. Definition of [custom] events Events you already know: 27/03/20155 Denken. Präsentieren. Umsetzen.
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 6 load
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 7 click
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 8 submit
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 9 focus
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 10 blur
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 11 mouseover
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 12
Namics. Definition of [custom] events Examples of custom events: 27/03/ Denken. Präsentieren. Umsetzen.
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 14 onColourChange
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 15 onItemAdded
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 16 onSliderMove
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 17 onMaxValueReached
Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 18 Note the “on” prefix
Namics. Why use custom events? 27/03/ 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 27/03/ Denken. Präsentieren. Umsetzen.
Namics. Why use custom events? 27/03/2015 Denken. Präsentieren. Umsetzen. 21 Easier = I can go home earlier
Namics. Why use custom events? 27/03/2015 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”. 27/03/ Denken. Präsentieren. Umsetzen.
Namics. jQuery helps 27/03/ 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 27/03/ Denken. Präsentieren. Umsetzen.
Namics. jQuery helps 27/03/ Denken. Präsentieren. Umsetzen.
Namics. jQuery helps 27/03/ Denken. Präsentieren. Umsetzen. What you need to know
Namics. jQuery helps 27/03/ Denken. Präsentieren. Umsetzen. $(‘selector’).trigger(‘onMyEvent’)
Namics. jQuery helps 27/03/ Denken. Präsentieren. Umsetzen. $(‘selector’).bind(‘onMyEvent’, function() { // do something } );
Namics. jQuery helps 27/03/ Denken. Präsentieren. Umsetzen. That’s it!
Namics. Example 27/03/ Denken. Präsentieren. Umsetzen.
Namics. Example cript-custom-events-jquery/ 27/03/ Denken. Präsentieren. Umsetzen.
Namics. Thank. You. Questions? © Namics 27/03/ Denken. Präsentieren. Umsetzen.
27/03/ Denken. Präsentieren. Umsetzen.