JavaScript on jsfiddle.net

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 28, 2011 at 8:29

codeandcloud

55.6k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jerone · Accepted Answer · 2011-03-28 08:30:56Z

1

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

answered Mar 28, 2011 at 8:30

jerone

17.1k4 gold badges42 silver badges58 bronze badges

Comments

scheffield · Accepted Answer · 2011-03-28 08:36:14Z

0

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.

answered Mar 28, 2011 at 8:36

scheffield

6,7972 gold badges33 silver badges31 bronze badges

Collectives™ on Stack Overflow

JavaScript on jsfiddle.net

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related