JavaScript DOM & event

JavaScript
DOM & Event
Open Tech Talk, 22nd January 2011
@HackerSpacePP

About Me
var presenter = {
name: "Lim Borey",
workAt: "Yoolk Inc.",
email: "lim.borey@gmail.com",
twitter: "@limborey",
communities: [
"ShareVisionTeam",
"Pailin"
]
};

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

DOM Overview
<table border="2">
<tr>
<td>cell is row 0 column 0</td>
</tr>
<tr>
</tr>
</table>

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.

Navigating the DOM
• The document node

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>

Navigating the DOM
• All node

Navigating the DOM
<p>
<strong>Hello</strong>
how are you doing?
</p>

Creating Node

var textNode = document.createTextNode("world");

var myNewPNode = document.createElement("p");

Attaching, copying or
removing nodes

Attaching, copying or
removing nodes
myP.appendChild(myTextNode);

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 A representation of using callbacks
able to handle threads to wait for the page to load

Defining Event Handler
• Old way
window.onload = init();

• New way (add event)
window.addEventListener("load", init, false);
window.attachEvent("onload", init); //IE

Event Methods
• Adding and removing event listener

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

Cancel Bubbling
• W3C Standard Browser
e.stopPropagation()
• Internet Explorer
window.event.cancelBubble()

Overriding Browser
default event
• W3C Standard Broswer:
e.preventDefault();
• Internet Explorer
window.event.returnValue = false;

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

JavaScript DOM & event

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (12)

Similar a JavaScript DOM & event

Similar a JavaScript DOM & event (20)

Último

Último (20)

JavaScript DOM & event