1. DOM Events
Pete Frueh

2. What’s a Document?

3. The 1040 is a Document!

4. google.com is a Document!

5. yahoo.com is a Document!

6. facebook.com is a Document!

7. linkedin.com is a Document!

8. Prerequisite Brainwashing
• The WWW is made up of documents
• Documents can contain images, forms, links to
other documents, embedded media, etc.
• No matter how dynamic, interactive,
personalized, or app-like a web page is, it’s still
just a document.

9. Topics
1. The DOM is the BOM
2. DOM Events and How to (At/De)tach Them
3. DOM Event Flow
4. The Event Object
5. Event Delegation

10. The Browser Object Model (BOM)
The interface between the browser and JavaScript
(starting at the top-level window object)
PROPERTIES: window.navigator, window.location,
window.frames, window.history, etc.
METHODS: window.open, window.close, window.alert, etc.
EVENTS: window.onscroll, window.onresize, etc.

11. The Browser Object Model (BOM)
http://jsfiddle.net/pfrueh/AXtfN/

12. The Document Object Model (DOM)
• “The DOM is a language- and platform neutral interface
that allows programs and scripts to dynamically access
and update the content and structure of documents.”
• In the browser, the document object is created
automatically with each new HTML document; it is
assigned to the window object:

13. The Document Object Model (DOM)
In the DOM, everything’s a Node, and there are 12
subclasses of Node, the most common are:
Document: window.document
Element: myEl = document.getElementById('my-div')
Attribute:
element.setAttribute('href', 'http://www.linkedin.com')
element.getAttribute('bar') // null if !exists on element
myAttr = document.createAttribute('href')
Text: myText = document.createTextNode('Hello World')

14. The Document Object Model (DOM)
http://jsfiddle.net/pfrueh/w4a7W/

15. Events: HTML
<!-- alerts a reference to the event object (discussed later) -->
<a href="#" onclick="alert(event)">...</a>
<!-- alerts a reference to the <a> element -->
<a href="#" onclick="alert(this)">...</a>
<!-- this used to be a common pattern -->
<a href="#" onclick="handleClick(event, this)">...</a>

16. Events: DOM Level 0
<div id="my-div">My Div</div>
var myDiv = document.getElementById('my-div');
myDiv.onclick = function(e) {
alert(e); // alerts the event object
alert(this); // alerts a reference to myDiv
};
// ^ what's the problem with this approach?

17. Events: DOM Level 2
var myA = document.getElementById('my-a');
// W3C compliant browsers
myA.addEventListener('click', handleClick, false);
// IE less than 9 still requires proprietary events :(
myA.attachEvent('onclick', handleClick);

18. Simple Pattern For Modern Browsers
(Using Native JS and not a Library)
if (element.addEventListener) { //  feature/object detection
element.addEventListener('click', clickHandler, false);
} else if (element.attachEvent) { // Pre-IE9
element.attachEvent('onclick', clickHandler);
}
if (element.removeEventListener) {
element.removeEventListener('click', clickHandler, false);
} else if (element.detachEvent) { // Pre-IE9
element.detachEvent('onclick', clickHandler);
}

19. Attaching Events
http://jsfiddle.net/pfrueh/EvXmW/

20. How to Tell When the DOM is Loaded
document.addEventListener('DOMContentLoaded', init, false);
// ^ works for all modern browsers including IE 9+ (but not before)
http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html
// libraries will take care of the pre-IE9 issue, so use them
jQuery: $(document).ready(init) OR $(init)
YUI 2: YAHOO.Event.onDOMReady(init)
YUI 3: Y.on('domready', init)

21. DOM Event Flow

22. DOM Event Flow
http://jsfiddle.net/pfrueh/FK7QC/
(toggle capturing on/off)

23. The DOM Event Object
function handleClick(e) {
alert(e.type); // click
alert(e.target); // element clicked
alert(e.currentTarget); //element this handler was attached to
e.preventDefault(); // don’t perform the default browser action
e.stopPropagation(); // stop this event from capturing/bubbling
}

24. The DOM Event Object
http://jsfiddle.net/pfrueh/sAGrq/
(target, currentTarget, preventDefault,
stopPropagation, and toggling on/of capturing)

25. A Note About
The IE Event Object (Pre-IE9)
function handleClick() { //  note: event just exists; it is not passed in
alert(event.type); // == e.type
alert(event.srcElement); // == e.target
/* No equivalent of e.currentTarget */
event.returnValue = false; // == e.preventDefault()
event.cancelBubble = true; // == e.stopPropagation()
}

26. Event Delegation
In a nutshell: using one event handler on an
ancestor element to manage the interaction of
its descendant elements.
DEMO:
http://www.linkedin.com/signal/
(search for 'youtube')

27. Event Delegation
http://jsfiddle.net/pfrueh/b6vhS/

28. Thank You!
Questions?