JavaScript: Attaching/Detaching Event, OnLoad vs. DOMContentLoaded, Manipulating DOM and CSS

Event Handling, Attaching and Detaching Events

3 phases of event dispatch:

Capturing – going down the DOM tree until it reaches the target element
Target
Bubbling – going back up the DOM tree from the target element

// standard way of accessing the Event object
var eventHandlerDOM = function(evt) {
alert(evt.type); //displays click
}

// starting IE 9 you can use the standard way
var eventHandlerIE8Older = function() {
var evt = window.event;
alert(evt.type);
}

// cross-browser way
var eventHandlerCB = function(evt) {
if (!evt) evt = window.event;
alert(evt.type);
}

window.onload = function() {
var btn = document.getElementById(“btn”);

// 2 ways of attaching an event  
btn.onclick = eventHandlerCB;  
// or ...  
if (btn.addEventListener) {  
    btn.addEventListener("click", eventHandlerCB, false);  
}  
else {  
    // starting IE 9, you can use the standard way using  
    //  addEventListener  
    btn.attachEvent("onclick", eventHandlerCB);  
}  
  
alert("events attached");  
alert("now detaching events...");  
detachEvents();  
alert("events detached");       }  

// detaching events
var detachEvents = function() {
if (btn.removeEventListener) {
btn.removeEventListener(“click”, eventHandlerCB, false);
}
else {
// starting IE 9, you can use the standard way using
// removeEventListener
btn.detachEvent(“onclick”, eventHandlerCB);
}
}

window.onload Event vs. document.DOMContentLoaded event

The problem with running script on window.onload event is that if you have a rather large image to download, your script will run only after the image is downloaded. window.onload event is triggered after everything, including external stylesheets, javascript files and images, has been downloaded. An alternative, and usually a best practice, is to run your script on document.DOMContentLoaded event.

var readyFunc = function() {
var stat = document.getElementById(“statDOMReady”);
stat.innerHTML = “DOM is ready!!!”;
}

document.addEventListener(“DOMContentLoaded”, readyFunc, false);

Note that document.DOMContentLoaded event is an HTML5 specification. Also if your script needs to work with CSS, you need to put all your external stylesheets in the header and all your external scripts in the footer so all the styles will be loaded before your scripts are run.

Manipulating DOM

A sample of what you can do for manipulating DOM:

document.createElement() – create an Element node
document.createTextNode() – create a Text node
element.cloneNode() – create a copy of a node and its attributes with option to include the descendants as well
element.appendChild() – add a new child node as the last child node
element.insertBefore() – insert a new child node before a specified child node
element.removeChild() – remove a child node
element.replaceChild() – replace a child node
document.createDocumentFragment() – create an imaginary Node object; useful for adding content to your document, or extracting parts of your document and modifying it and inserting it back

Manipulating CSS

2 ways to import external stylesheets:

Persistent, preferred, and alternate stylesheets:

element.style, window.getComputedSyle(), element.currentStyle, elements positioning properties:

var p1 = document.getElementById(“p1”);
p1.style.fontSize = “20px”;

// standard way of getting the computed style
var computedStyle = window.getComputedStyle(p1, null);
alert(computedStyle.fontSize); // displays 20px

// IE way of getting the computed syle
// starting from IE9, you can use the standard way
var computedStyle2 = p1.currentStyle;
alert(computedStyle2.fontSize); // displays 20px

// cross-browser code for getting the computed style
if ( !(“getComputedStyle” in window) ) {
alert(“getComputedStyle does not exist”)
window.getComputedStyle = function(element) {
return element.currentStyle;
}
}

// positioning properties of an element you can use
alert(p1.offsetTop); // displays 130
alert(p1.offsetLeft); // displays 8
alert(p1.offsetHeight); // displays 23
alert(p1.offsetWidth); // displays 911
// below will display 0, because it’s parent is the body tag
alert(p1.offsetParent.offsetTop);
var body = document.getElementsByTagName(“body”)[0];
alert(body.offsetTop); // displays 0