Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "T-Talk. Javascript. JQuery. Custom Events. Namics. Thomas Junghans. Frontend Engineer. 12 th August 2009."— Presentation transcript:

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

13 Namics. Definition of [custom] events  Examples of custom events: 27/03/ 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/ 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/ 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/ Denken. Präsentieren. Umsetzen.

24 Namics. jQuery helps 27/03/ 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/ Denken. Präsentieren. Umsetzen.

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

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

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

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

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

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

32 Namics. Example  cript-custom-events-jquery/ 27/03/ Denken. Präsentieren. Umsetzen.

33 Namics. Thank. You. Questions? © Namics 27/03/ Denken. Präsentieren. Umsetzen.

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


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

Similar presentations


Ads by Google