Event handling in js

Question

i have a div

<div id="mainDiv" onclick="devide(this.id, event);" style="z-index:1;position:relative; width:400px; height:400px; border:1px red solid;"></div>

on its click i append to more divs to it and want the same thing to happen to them, means on there click 2 more divs shud b added to them

on click on mainDiv mainDiv -mainDiv0 -mainDiv1

on click on mainDiv0 mainDiv -mainDiv0 -mainDiv00 -mainDiv01 -mainDiv1

i guess i was able to clear the things

i used following js

function devide(id, evt){
    alert(id);
    var divElement = document.getElementById(id);
    if(typeof(divElement) != "undefined" && divElement!=null){
        captureMousePosition(evt);
        if(splitVertical==1)
            verticalSplit(divElement);
        else
            horizontalSplit(divElement);
    }
}

function verticalSplit(divElement){
    divElement.style.border = "0px red dashed";
//  divElement.removeAttribute("onclick");
    var width = ((divElement.offsetWidth-(xMousePos-LEFT_MARGIN))/divElement.offsetWidth)*100;
    var newDiv1 = document.createElement("div");
    newDiv1.setAttribute("id", divElement.id+"0");
//  newDiv1.onclick = "devide('"+divElement.id+"0', event);";
    newDiv1.style.width = (100-width)+"%";
    newDiv1.style.height = "100%";
    newDiv1.style.float = "left";
    newDiv1.style.border = "1px red dashed";
    newDiv1.style.zIndex = divElement.style.zIndex+1;
    var newDiv2 = document.createElement("div");
    newDiv2.setAttribute("id", divElement.id+"1");
    newDiv2.style.width = width+"%";
    newDiv2.style.height = "100%";
    newDiv2.style.float = "left";
    newDiv2.style.border = "1px red dashed";
    newDiv2.style.zIndex = divElement.style.zIndex+1;
    divElement.appendChild(newDiv1);
    divElement.appendChild(newDiv2);
    newDiv1.addEventListener("click",devide(divElement.id+"0", event),true);
    newDiv2.addEventListener("click",devide(divElement.id+"1", event),true);
}

but this is recursively calling devide function for the first encountered element say mainDiv0,mainDiv00,mainDiv000.... and so on

please help me with this

Answer 1

Regarding the lines:

var divElement = document.getElementById(id);
if(typeof(divElement) != "undefined" && divElement!=null){

typeof is an operator, not a function, so it doesn't need to be followed by a grouping operator ().

More importantly, the first part of the test is unnecessary and the second part can be reduced to:

if (divElement) {

If a document object doesn't exist, or does not support getElementById then the first line will result in a script error and stop execution. If the first line executes successfully, then divElement will either be a reference to a DOM element or null (per the W3C DOM Core specification).

Given the above, if divElement != null returns true, then typeof divElement != 'undefined' must return true (since divElement can't be undefined and even if it was, undefined == null), and vice versa, so it is redundant. If an explicit test is required (and it rarely is), then:

if (divElement !== null) {

should be used.

Answer 2

The situation you are describing is called event bubbling.

The W3C model says you can call .stopPropagation() on the event. IE might need window.event.cancelBubble

To do unobtrusive javascript with your code try:

HTML

<div id="mainDiv"></div>

JS

function devide(evt){
    var divElement = document.getElementById(this.id);// this.id !
    if(typeof(divElement) != "undefined" && divElement!=null){
        captureMousePosition(evt);
        if(splitVertical==1)
            verticalSplit(divElement);
        else
            horizontalSplit(divElement);
    }
}

document.getElementById('mainDiv').onclick=devide; // notice it's just the function name