javascript dom & event
TRANSCRIPT
![Page 1: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/1.jpg)
JavaScript DOM & Event
Open Tech Talk, 22nd January 2011
@HackerSpacePP
![Page 2: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/2.jpg)
var presenter = { name: "Lim Borey", workAt: "Yoolk Inc.", email: "[email protected]", twitter: "@limborey", communities: [ "ShareVisionTeam", "Pailin" ] };
About Me
![Page 3: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/3.jpg)
DOM Overview • DOM: Document Object Model - popular way of
representing XML documents
• Implemented in many languages: o Java,
o Perl,
o PHP,
o Ruby,
o Python,
o JavaScript
o …
• was constructed to provide an intuitive way for
developers to navigate an XML hierarchy
![Page 4: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/4.jpg)
DOM Overview <table border="2"> <tr> <td>cell is row 0 column 0</td> <td>cell is row 0 column 1</td> </tr> <tr> <td>cell is row 1 column 0</td> <td>cell is row 1 column 1</td> </tr> </table>
![Page 5: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/5.jpg)
DOM Overview
![Page 6: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/6.jpg)
Waiting for the HTML DOM to Load
• HTML is parsed.
• External scripts/style sheets are loaded.
• Scripts are executed as they are parsed in the
document.
• HTML DOM is fully constructed.
• Images and external content are loaded.
• The page is finished loading.
![Page 7: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/7.jpg)
Navigating the DOM • The document node
![Page 8: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/8.jpg)
Navigating the DOM <html> <head> <title>JavaScript and DOM Interfaces </title> <script> function start() { myBody = document.getElementsByTagName("body")[0]; myBodyElements = myBody.getElementsByTagName("p"); myP = myBodyElements[1]; } </script> </head> <body onload="start()"> <p>hi</p> <p>hello</p> </body> </html>
![Page 9: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/9.jpg)
Navigating the DOM
![Page 10: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/10.jpg)
Navigating the DOM • All node
![Page 11: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/11.jpg)
Navigating the DOM <p> <strong>Hello</strong> how are you doing? </p>
![Page 12: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/12.jpg)
Creating Node
var textNode = document.createTextNode("world");
var myNewPNode = document.createElement("p");
![Page 13: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/13.jpg)
Attaching, copying or removing nodes
![Page 14: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/14.jpg)
Attaching, copying or removing nodes
myP.appendChild(myTextNode);
![Page 15: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/15.jpg)
Node information
![Page 16: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/16.jpg)
Event • an action that is fired (initiated) within a web page.
• JavaScript is Single Thread
• JavaScript uses asynchronous callback
What you’d see if JavaScript were able to handle threads
A representation of using callbacks to wait for the page to load
![Page 17: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/17.jpg)
Event Phases
![Page 18: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/18.jpg)
Defining Event Handler • Old way
window.onload = init();
• New way (add event)
window.addEventListener("load", init, false);
window.attachEvent("onload", init); //IE
![Page 19: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/19.jpg)
Event Methods • Adding and removing event listener
![Page 20: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/20.jpg)
The Event Object • Contains contextual information about the current
event
• an object that’s provided, or is available, inside of
every event handler function
• W3C Standard Browser: e
• Internet Explorer: window.event
textArea.onkeypress = function(e){ e = e || window.event; return e.keyCode != 13; };
![Page 21: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/21.jpg)
Cancel Bubbling • W3C Standard Browser
e.stopPropagation()
• Internet Explorer
window.event.cancelBubble()
![Page 22: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/22.jpg)
Overriding Browser default event
• W3C Standard Broswer:
e.preventDefault();
• Internet Explorer
window.event.returnValue = false;
![Page 23: JavaScript DOM & event](https://reader036.vdocuments.net/reader036/viewer/2022082310/5559ae92d8b42a5b2a8b51bd/html5/thumbnails/23.jpg)
References • Pro JavaScript™ Techniques, John Resig
• http://www.howtocreate.co.uk/tutorials/javascript/
domstructure
• https://developer.mozilla.org/en/Traversing_an_HTM
L_table_with_JavaScript_and_DOM_Interfaces