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 

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

(merci http://jsfiddle.net/) 

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

div p span Capturing Bubbling Capturing vs Bubbling 

Real Life Application ... function confirm(form) { if(condition()) { form.submit(); } } 

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

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 

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); 

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

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

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 » 

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

Loose coupling Events in your application are like your API. 

Example : User Plugin ● User events : – user_connected – user_disconnected – user_some_action – user_updated 

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. 

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