DOM Events

Pete Frueh

What’s a Document?

The 1040 is a Document!

google.com is a Document!

yahoo.com is a Document!

facebook.com is a Document!

linkedin.com is a Document!

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.

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

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.

The Browser Object Model (BOM)

http://jsfiddle.net/pfrueh/AXtfN/

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:

window.document

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.documentElement: myEl = document.getElementById('my-div')Attribute:

element.setAttribute('href', 'http://www.linkedin.com')element.getAttribute('bar') // null if !exists on elementmyAttr = document.createAttribute('href')

Text: myText = document.createTextNode('Hello World')

The Document Object Model (DOM)

http://jsfiddle.net/pfrueh/w4a7W/

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>

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?

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

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

Attaching Events

http://jsfiddle.net/pfrueh/EvXmW/

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 themjQuery: $(document).ready(init) OR $(init)YUI 2: YAHOO.Event.onDOMReady(init)YUI 3: Y.on('domready', init)

DOM Event Flow

DOM Event Flow

http://jsfiddle.net/pfrueh/FK7QC/

(toggle capturing on/off)

The DOM Event Objectfunction 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

}

The DOM Event Object

http://jsfiddle.net/pfrueh/sAGrq/

(target, currentTarget, preventDefault, stopPropagation, and toggling on/of capturing)

A Note AboutThe 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()

}

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

Event Delegation

http://jsfiddle.net/pfrueh/b6vhS/

Thank You!

Questions?