Question

Only today I figured out how event propagation works and set out pompously to test it on my existing code base but arghhhhhhh damn you javascript……nothing seems to be simple enough with you :X

Here is my problem, I define a set of events on an anchor:

theLink.setAttribute('onMouseOver','doSomething(this)');    **// works**

theLink.addEventListener("mouseout", function(event){doSomethingElse(event)}, false);  **// does not work**

theLink.onmouseout = function(event){doSomethingElse(event)};     **// does not work**

Only if I define events as in the first example then it seems to be working in the second or the third definitions as well. But I can not use that definition because I have to pass event object.

Any hints? I am using firefox.

Answer 1

All three of these worked for me using the following code (in firefox):

HTML:

<a id="link1">Link 1</a>
<a id="link2">Link 2</a>
<a id="link3">Link 3</a>

JS:

var link1 = document.getElementById("link1");
var link2 = document.getElementById("link2");
var link3 = document.getElementById("link3");

window.doSomething = function(event) {
    console.log(event);
}

link1.setAttribute('onMouseOver', 'doSomething(this)');

link2.addEventListener("mouseout", function(event) {
    doSomething(event)
}, false);

link3.onmouseout = function(event) {
    doSomething(event)
};

Here is a jsfiddle with it working: http://jsfiddle.net/magicaj/qk6wU/

You might also consider using a library like jQuery that handles cross browser incompatibility with the addEventListener method that is not supported by some versions of IE, the JS would look something like this:

$("#link1").mouseover(doSomething);
$("#link2").mouseover(doSomething);
$("#link3").mouseover(doSomething);