1. T-Talk. Javascript. JQuery. Custom Events. Namics. Thomas Junghans. Frontend Engineer. 12 th August 2009

2. Namics. Contents  Definition  Why use?  jQuery helps  Example  Links 27/03/2015 Denken. Präsentieren. Umsetzen. 2

3. Namics. Definition of [custom] events 27/03/20153 Denken. Präsentieren. Umsetzen.

4. 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.

5. Namics. Definition of [custom] events  Events you already know: 27/03/20155 Denken. Präsentieren. Umsetzen.

6. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 6 load

7. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 7 click

8. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 8 submit

9. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 9 focus

10. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 10 blur

11. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 11 mouseover

12. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 12 http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html

13. Namics. Definition of [custom] events  Examples of custom events: 27/03/201513 Denken. Präsentieren. Umsetzen.

14. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 14 onColourChange

15. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 15 onItemAdded

16. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 16 onSliderMove

17. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 17 onMaxValueReached

18. Namics. Definition of [custom] events 27/03/2015 Denken. Präsentieren. Umsetzen. 18 Note the “on” prefix

19. Namics. Why use custom events? 27/03/201519 Denken. Präsentieren. Umsetzen.

20. 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/201520 Denken. Präsentieren. Umsetzen.

21. Namics. Why use custom events? 27/03/2015 Denken. Präsentieren. Umsetzen. 21 Easier = I can go home earlier

22. Namics. Why use custom events? 27/03/2015 Denken. Präsentieren. Umsetzen. 22 While making life easier, you’re improving code quality

23. 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/201523 Denken. Präsentieren. Umsetzen.

24. Namics. jQuery helps 27/03/201524 Denken. Präsentieren. Umsetzen.

25. 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/201525 Denken. Präsentieren. Umsetzen.

26. Namics. jQuery helps 27/03/201526 Denken. Präsentieren. Umsetzen.

27. Namics. jQuery helps 27/03/201527 Denken. Präsentieren. Umsetzen. What you need to know

28. Namics. jQuery helps 27/03/201528 Denken. Präsentieren. Umsetzen. $(‘selector’).trigger(‘onMyEvent’)

29. Namics. jQuery helps 27/03/201529 Denken. Präsentieren. Umsetzen. $(‘selector’).bind(‘onMyEvent’, function() { // do something } );

30. Namics. jQuery helps 27/03/201530 Denken. Präsentieren. Umsetzen. That’s it!

31. Namics. Example 27/03/201531 Denken. Präsentieren. Umsetzen.

32. Namics. Example  http://thomas.junghans.co.za/frontendengineering/javas cript-custom-events-jquery/ 27/03/201532 Denken. Präsentieren. Umsetzen.

33. Namics. Thank. You. Questions? thomas.junghans@namics.com © Namics 27/03/201533 Denken. Präsentieren. Umsetzen.

34. 27/03/201534 Denken. Präsentieren. Umsetzen.