JavaScript on jsfiddle.net

2019-09-13 18:41发布

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

标签: javascript
3条回答
唯我独甜
2楼-- · 2019-09-13 19:03

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?

查看更多
Lonely孤独者°
3楼-- · 2019-09-13 19:06

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

查看更多
你好瞎i
4楼-- · 2019-09-13 19:22

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.

查看更多
登录 后发表回答