CODEWITHSUNDEEP
javascript
Leahcim
Leahcim

Reputation: 41929

JavaScript on jsfiddle.net

You will see at the very bottom of this code there is an addEventHandler function that runs on window load. If I want to test this on jsfiddle.net how can/should I change the code, taking into account that the page doesn't load on jsfiddle.net. Here's the fiddle http://jsfiddle.net/mjmitche/KpTZq/

Please keep in mind that I'm a newbie, so try to make the answer as detailed as you can. Thanks

function addEventHandler(oNode, evt, oFunc, bCaptures)
{
    if (window.attachEvent)
        oNode.attachEvent("on"+evt, oFunc);
    else
        oNode.addEventListener(evt, oFunc, bCaptures);
}
function getEventTarget(e) {
    if (window.event) return window.event.srcElement;
    else return e.target;
}

function div1Handler(evt) {
    var e = evt || window.event;
    var target = getEventTarget(e);
    var str = "Event handler for div1, target: " + target.getAttribute('id') + " , type: " + e.type;
    if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
    alert(str);
    if (e.cancelBubble != null) e.cancelBubble=true;
    else e.stopPropagation();
}
function div2Handler(evt) {
    var e = evt || window.event;
    var target = getEventTarget(e);
    var str = "Event handler for div2, target: " + target.getAttribute('id') + " , type: " + e.type;
    if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
    alert(str);
}
function div3Handler(evt) {
    var e = evt || window.event;
    var target = getEventTarget(e);
    var str = "Event handler for div3, target: " + target.getAttribute('id') + " , type: " + e.type;
    if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
    alert(str);

}
function bodyHandler(evt) {
    var e = evt || window.event;
    var target = getEventTarget(e);
    var str = "Event handler for body, target: " + target.getAttribute('id') + " , type: " + e.type;
    if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
    alert(str);
}

function initializeHandlers() {
    addEventHandler(document.getElementsByTagName("body")[0],"click",bodyHandler,false);
    addEventHandler(document.getElementById("div1"),"click",div1Handler,false);
    addEventHandler(document.getElementById("div2"),"click",div2Handler,false);
    addEventHandler(document.getElementById("div3"),"click",div3Handler,false);
    if (!window.event) {
        addEventHandler(document.getElementsByTagName("body")[0],"click",bodyHandler,true);
        addEventHandler(document.getElementById("div1"),"click",div1Handler,true);
        addEventHandler(document.getElementById("div2"),"click",div2Handler,true);
        addEventHandler(document.getElementById("div3"),"click",div3Handler,true);
    }
}

addEventHandler(window, "load", function(evt) { initializeHandlers() } );

Upvotes: 0

Views: 593

Answers (3)

scheffield
scheffield

Reputation: 6787

i guess your problem is that the events aren't bound as you expected. The reason for this is that the standard configuration for jsfiddle is to run your code onLoad. So your event will never fired cause the onLoad already fired.

To change this, use the no wrap (head) configuration. To change it use the drop down on the left top corner.

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55210

Try this: http://jsfiddle.net/KpTZq/2/

What I have done is very simple. I altered two dropdownlists on the left of jsfiddle as shown below. jsFiddle altered settings

Earlier you had written the event on the Mootools onLoad event. My alteration placed the code at the head tag of the page without any wrap. Got it?

Upvotes: 2

jerone
jerone

Reputation: 16871

You should be using jsFiddle onDomReady event in the left column.

Upvotes: 1

Related Questions