DOM Events


Published on

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Browser Object Model isn’t a standardized term, but it’s somewhat common.
  • Most languages have a DOM implementation (read a file and then convert it into a DOM Document object)The original DOM Level 1 had a CORE and HTML moduleDOM 2 adds Events and a bunch of other modules
  • The DOM also has collections of nodes
  • Was common in web dev books until as late as ~2002-2004This is not the recommended way of attaching events, and if you do it on LinkedIn, your colleagues will never let you touch another line of JS ever again
  • “DOM Level 0” refers to the browser manufacturer’s DOM, before the W3C got involved.
  • DOM Events

    1. 1. DOM Events Pete Frueh
    2. 2. What’s a Document?
    3. 3. The 1040 is a Document!
    4. 4. is a Document!
    5. 5. is a Document!
    6. 6. is a Document!
    7. 7. 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.close, window.alert, etc.EVENTS: window.onscroll, window.onresize, etc.
    11. 11. The Browser Object Model (BOM)
    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, 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)
    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 Events
    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) 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 Flow (toggle capturing on/off)
    23. 23. The DOM Event Objectfunction handleClick(e) { alert(e.type); // click alert(; // 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 (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); // == /* 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: (search for youtube)
    27. 27. Event Delegation
    28. 28. Thank You! Questions?