Question

i just wanted to make a test, i’m used to work on jQuery but not on “plain” javascript, i tried to bind this event, but i’ve got no answer from the event, i just created a link and a script tag in the html code, with :

var li = document.getElementById(‘first’);
li.addEventListener(‘onMouseover’, function(){
alert(‘ok’);
})

Can you please tell me what is wrong with it? i don’t see the mistake.
Thanks

Answer 1

First, you need to drop the “on” part for addEventListener(). Second, the event name needs to be all lower case. Third, you were missing the third parameter, which is Boolean indicating whether to handle the event in the capturing phase rather than the bubbling phase (if in doubt, use false).

The other issue you need to consider is that IE <= 8 does not support addEventListener(), so you need to include an IE-specific fallback using the proprietary attachEvent() method.

With all this, your example becomes:

var li = document.getElementById('first');
if (typeof li.addEventListener != "undefined") {
    li.addEventListener('mouseover', function() {
        alert('ok');
    }, false);
} else if (typeof li.attachEvent != "undefined") {
    li.attachEvent('onmouseover', function() {
        alert('ok');
    });
}

The easiest cross-browser solution is the so-called DOM0 method, using the element’s onmouseover property. However, this has the disadvantage of only allowing one event listener per event per element and is therefore potentially susceptible to being overridden by other code.

li.onmouseover = function() {
    alert('ok');
};