javascript dom event
DESCRIPTION
Javascript Dom & EventTRANSCRIPT
Click to add Text
Javascript
Presented by Bunlong VAN
http://geekhmer.github.io
DOM & Event
The Disclaimer
DOM
•DOM (Document Object Modeling)•Retrieving Nodes
• document.getElementById(id)• document.getElementsByName(name)• Node.getElementsByTagName(tagName)
Document Tree Structure
<html>
<body>
<h1>Heading 1</h1>
<p>Paragraph.</p>
<h2>Heading 2</h2>
<p>Paragraph.</p>
</body>
</html>
#text
H1
H2
P
BODY
HTML
#document
HEAD
#text
P
#text
#text
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
lastC
hild
lastC
hild
lastC
hild
lastC
hild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
child, sibling, parent (Con.)
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
lastC
hild
lastC
hild
lastC
hild
lastC
hild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
child, sibling, parent (Con.)
#text
H1
#text #text#text
lastChild
lastC
hild
lastC
hild
lastC
hild
lastC
hild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
pa
ren
tNo
de
pa
ren
tNo
de
pa
ren
tNo
de
pa
ren
tNo
de
pa
ren
tNo
de
H2P P
BODY
child, sibling, parent (Con.)
#text
H1 H2P
BODY
#text
P
#text#text
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
firs
tCh
ild
nextSibling nextSibling nextSibling
Child Nodes
0
P
childNodes
BODY
H2H1
1 2
P
3
Style
•node.style.stylename
•background-color•border-radius•font-size•list-style-type•word-spacing•z-index
•backgroundColor•borderRadius•fontSize•listStyleType•wordSpacing•zIndex
Making Elements
document.createElement(tagName);
document.createTextNode(text);
node.cloneNode(); // clone an individual element
node.cloneNode(true); // clone an element and all of its des
Linking Ements
node.appendChild(new);
node.insertBefore(new, sibling);
node.replaceChild(new, old);
old.parentNode.replaceChild(new, old);
Removing Elements
node.removeChild(old); // It returns the node
old.parentNode.removeChild(old);
innerHTML
•The W3C standard does not provide access to the HTML parser•All browsers implement Microsoft's innerHTML property•node.innerHTML = “<p>this is text</p>”;
Which Way is Better?
•It is better to build or clone elements and append them to the document?•Or is it better to complile an HTML text and use innerHTML to realize it?•Favor clean code and easy maintenance•Favor performance only in extreme cases
Event
•The browser has an event-driven, single-threaded, asynchronous programming model•Events are targeted to particular nodes•Event cause the invocation of event handler functions
Mouse Event
The target is the topmost (z-index) node containing the cursor:
•click•dblclick•mousedown•mousemove•mouseout•mouseover•mouseup
Input Event
•blur•change•focus•keydown•keyup•reset•submit
The target is the node having focus:
Event Handler
•Classic– node[“on” + type] = handler;
•Microsoft– node.attachEvent(“on” + type, handler);
•W3C– node.addEventListener(type, handler, false);
var handler = function(e) {e = e || event;var target = e.target || e.srcElement;…
}
Bubbling
Bubbling means that the event is given to the target, and then its parent, and so on until the event is canceled.
Why Bubble?
•Suppose you have 100 draggable objects•You could attach 100 sets of event handlers to those objects•Or you could attach one set of event handlers to the container of the 100 objects
Cancel Bubbling
•Cancel bubbling to keep the parent nodes from seeing th event:
e.cancelBubble = true;If(e.stopPropagation) {
e.stopPropagation();}
Prevent Default Action
•An event handler can prevent a browser action associated with the event (such as submitting a form):
e.returnValue = false;If(e.preventDefault) {
e.preventDefault();}Return false;
