Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Events #DevCamp7

Javascript Events #DevCamp7

Florian Strzelecki

April 10, 2013
Tweet

More Decks by Florian Strzelecki

Other Decks in Programming

Transcript

  1. id="@Exirel" />

    View full-size slide

  2. Events
    « Many objects can have event handlers
    specified. These act as non-capture event
    listeners for the object on which they are
    specified. »
    - HTML Spec

    View full-size slide

  3. Event handler
    var handler = function (event) {
    alert('You clicked me!');
    } ;
    document.addEventListener('click', handler);

    View full-size slide

  4. (merci http://jsfiddle.net/)

    View full-size slide

  5. Event handlers
    var handler = function (event) {
    alert('You clicked me!');
    } ;
    document.addEventListener('click', handler);
    document.addEventListener('click',
    function (event) {
    alert('Another event handling...');
    }
    );

    View full-size slide

  6. div
    p
    span
    Capturing Bubbling
    Capturing vs Bubbling

    View full-size slide

  7. Real Life Application

    ...

    <br/>function confirm(form) {<br/>if(condition()) {<br/>form.submit();<br/>}<br/>}<br/>

    View full-size slide

  8. DreamWeaver
    FrontPage
    « WYSIWYG DHTML »
    IT'S A CRAP!

    View full-size slide

  9. Event nightmares

    Who is « this »?

    Cross-browser features (requires framework)

    element.attachEvent (IE 6-8)

    capturing vs. bubbling (IE only use bubbling)

    A framework is a good solution

    View full-size slide

  10. Custom Event
    // create the event
    var evt = document.createEvent('Event');
    // define that the event name is `build`
    evt.initEvent('build', true, true);
    // elem is any element (including document)
    elem.dispatchEvent(evt);

    View full-size slide

  11. Custom Event (new)
    var evt = new CustomEvent('build');
    // fire the event.
    elem.dispatchEvent(evt);

    View full-size slide

  12. Custom event handler
    // where you want in your code
    document.addEventListener('build',
    function (event) {
    alert('Build complete');
    }
    );

    View full-size slide

  13. Loose coupling
    « A loosely coupled system is one in which
    each of its components has, or makes use of,
    little or no knowledge of the definitions of
    other separate components. »
    - Wikipedia « Loose coupling »

    View full-size slide

  14. Loose coupling

    Fire event on `document` when your
    application want to say « something
    happens »

    Add handler on `document` when you need
    it. Into a plugin. Or another one. Or into your
    main script, or...

    Event on `document` your
    « application level events ».

    View full-size slide

  15. Loose coupling
    Events in your application
    are like your API.

    View full-size slide

  16. Example : User Plugin

    User events :
    – user_connected
    – user_disconnected
    – user_some_action
    – user_updated

    View full-size slide

  17. Example : User Plugin

    Application Handler :
    – Handler on « user_connected » to load the User
    profile
    – Handler on « user_disconnected » to display the
    login form

    Another plugin :
    – Handler on « user_some_action » to trigger
    another action, event, etc.

    View full-size slide

  18. document.addHandler('devcamp_talk_end',
    function (event) {
    alert('Thanks!');
    }
    );

    View full-size slide