JavaScript addEvent function

Question

I have an addEvent function:

function addEvent(elem, event, func ) {
   if (typeof (window.event) != 'undefined')
        elem.attachEvent('on' + event, func);
   else 
       elem.addEventListener(event, func, false);
}

<a href="#" id="link">link</a>

and I'm trying to add the following to window.onload:

addEvent(window, 'load', function (){
   // add another event
   var link= document.getElementById('link');
   addEvent(link, 'click', function () {alert('Hi'); });
});

My question is: why does the link event not work?

You shouldn't test for an unrelated property (`window.event`). Instead, check for `addEventListener` itself. — SLaks, Nov 20 '11 at 00:21
trye using document. i don't think the window hase a onload. Plus try jquery.. — Bram, Nov 20 '11 at 00:22

score 4 · Answer 1 · answered Nov 20 '11 at 00:20

4

You misspelled function.

answered Nov 20 '11 at 00:20

SLaks

868,454
176
1,908
1,964

Hristo · Answer 2 · 2011-11-20T00:49:59.810

1

Try this:

function attachEvent(element, event, callbackFunction) {
    if (element.addEventListener) {
        element.addEventListener(event, callbackFunction, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, callbackFunction);
    }
};

edited Nov 20 '11 at 00:49

answered Nov 20 '11 at 00:36

Hristo

45,559
65
163
230

Guilherme Ferreira · Answer 3 · 2014-03-24T15:43:29.977

Instead of working this way, try this:

Element.prototype.events = {};
Element.prototype.addEvent = function (event, callBack) {
    if (this.events["on" + (event.replace("on", ""))] == undefined) {
        this.events["on" + (event.replace("on", ""))] = [];
    }
    this.events["on" + (event.replace("on", ""))].push(callBack);
    if (this["on" + (event.replace("on", ""))] == undefined) {
        this["on" + (event.replace("on", ""))] = function (e) {
            for (i in this.events["on" + (event.replace("on", ""))]) {
                this.events["on" + (event.replace("on", ""))][i](e);
            }
        }
    }
}

You will use it this way:

document.body.addEvent("click",function(){
   alert("Test");
});
document.body.addEvent("click",function(){
   alert("Test 2");
});
document.getElemntById("inputtest").addEvent("keyup",function(){
   alert("Input keyup");
});

score 0 · Answer 4 · answered Nov 20 '11 at 01:44

typeof (window.event) != 'undefined'

doesn't work really on chrome when I tested your code! this would be work fine:

!!window.attachEvent

and i consider that using brace in if..esle is a good practice.

function addEvent(elem, event, func ) {
    if (!!window.attachEvent){

        elem.attachEvent('on' + event, func);
    }
    else{
       elem.addEventListener(event, func, false);
    }
}

score -3 · Answer 5 · answered Nov 21 '11 at 05:50

Please try this.

function addEvent(elem,event,func)
{
    var evn = "on"+event;
    elem[evn] = func;
}
var obj = document.getElementById("link");
addEvent(obj,"click",function(){alert('hi');});

Here using this code you need not worry about attachEvent or addEventListener. This code will work for all browser. Hope this solves your problem.

JavaScript addEvent function

5 Answers5