Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DOM Events

997 views

Published on

Published in: Self Improvement, Technology
  • Be the first to comment

  • Be the first to like this

DOM Events

  1. 1. DOM Events Pete Frueh
  2. 2. What’s a Document?
  3. 3. The 1040 is a Document!
  4. 4. google.com is a Document!
  5. 5. yahoo.com is a Document!
  6. 6. facebook.com is a Document!
  7. 7. linkedin.com is a Document!
  8. 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. 9. Topics1. The DOM is the BOM2. DOM Events and How to (At/De)tach Them3. DOM Event Flow4. The Event Object5. Event Delegation
  10. 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. 11. The Browser Object Model (BOM) http://jsfiddle.net/pfrueh/AXtfN/
  12. 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. 13. The Document Object Model (DOM)In the DOM, everything’s a Node, and there are 12subclasses 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 element myAttr = document.createAttribute(href)Text: myText = document.createTextNode(Hello World)
  14. 14. The Document Object Model (DOM) http://jsfiddle.net/pfrueh/w4a7W/
  15. 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. 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};// ^ whats the problem with this approach?
  17. 17. Events: DOM Level 2var myA = document.getElementById(my-a);// W3C compliant browsersmyA.addEventListener(click, handleClick, false);// IE less than 9 still requires proprietary events :(myA.attachEvent(onclick, handleClick);
  18. 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. 19. Attaching Eventshttp://jsfiddle.net/pfrueh/EvXmW/
  20. 20. How to Tell When the DOM is Loadeddocument.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)
  21. 21. DOM Event Flow
  22. 22. DOM Event Flowhttp://jsfiddle.net/pfrueh/FK7QC/ (toggle capturing on/off)
  23. 23. 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}
  24. 24. The DOM Event Object http://jsfiddle.net/pfrueh/sAGrq/ (target, currentTarget, preventDefault,stopPropagation, and toggling on/of capturing)
  25. 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. 26. Event DelegationIn a nutshell: using one event handler on anancestor element to manage the interaction ofits descendant elements. DEMO: http://www.linkedin.com/signal/ (search for youtube)
  27. 27. Event Delegationhttp://jsfiddle.net/pfrueh/b6vhS/
  28. 28. Thank You! Questions?

×