JavaScript event handlers -why no alert?

I'm a newbie at JavaScript trying to learn event handlers. Looking at this fiddle http://jsfiddle.net/mjmitche/uV4kv/ can anyone tell me why the pop up is not appearing when the link is clicked?

I've also copied the code below

<a href="#" title="click me" id="clickLink">click me</a>


function addEventHandler(oNode, sEvt, fFunc, bCaptures){
    if (typeof(window.event) != "undefined")
        oNode.att开发者_如何学运维achEvent("on"+sEvt, fFunc);
    else
        oNode.addEventListener(sEvt,fFunc,bCaptures);
}

function onLinkClicked(e) {
    alert("you clicked the link");
}
function setUpClickHandler(){
    addEventHanlder(document.getElementById('clickLink'), "click", onLinkClicked, false);
}

addEventHandler(window,"load",setUpClickHandler,false);

---

There are basically three problems:

• You have some typos, e.g. "Hanlder" instead of "Handler" and "Sevt" instead of "sEvt".

• The code is already run after page load, so the event handler you add to window will never be called. Change in jsFiddle from onLoad to no wrap (head).

• You "IE detection" does not work. I get this error in Chrome:

  Uncaught TypeError: Object http://fiddle.jshell.net/_display/# has no method 'attachEvent'.

  Better would be to test whether the function window.attachEvent exists. I also think that window.event is only available when an event is raised.

If this is corrected, your code will run (DEMO).

---

Further notes:

Testing which method is supported (i.e. attachEvent or addEventListener) on every call of your function is unnecessary. It won't change during the life of the page. Better is to test only once at the beginning. Example:

var addEventHandler = (function() {
    if(window.attachEvent) {
        return function(oNode, sEvt, fFunc) {
            oNode.attachEvent("on"+sEvt, fFunc);
        };
    }
    else {
        return function(oNode, sEvt, fFunc, bCaptures) {
            oNode.addEventListener(sEvt,fFunc,bCaptures);
        };
    }
}());

This assigns a function the supported function to addEventHandler.

---

A couple of problems:

• You have a recurring typo, "Hanlder" instead of "Handler". There are at least two, one where you do your setUpClickHanlder (sic) function, and one within it (addEventHanlder).
• Also, you have "Sevt" where you mean "sEvt". (JavaScript is case sensitive.)

Let tools help you. Use a browser that gives you a console showing errors. Use a debugger for single-stepping through code, looking at variable values at runtime with inspectors, etc.

---

Your addEventHandler needs adustment:

function addEventHandler(oNode, sEvt, fFunc, bCaptures) {
    oNode.attachEvent ? oNode.attachEvent ("on" + sEvt, fFunc) :
                        oNode.addEventListener (sEvt, fFunc, bCaptures);
}

It is in event handlers themselves that you need to check for window.event