Trouble in Javascript event handling

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.

in the first case you are using MouseOver and second and third case you are using MouseOut .Are you assuming both behave same — GustyWind
– GustyWind, Commented Mar 10, 2011 at 5:48
you are missing the semicolon after doSomethingElse(event) don't know if that may be case :P — Jishnu A P
– Jishnu A P, Commented Mar 10, 2011 at 6:03

Adam Ayres · Accepted Answer · 2011-03-10 06:21:50Z

3

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

answered Mar 10, 2011 at 6:21

Adam Ayres

8,9381 gold badge35 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VJune Over a year ago

thanks for that, some thing is wrong with my code. I can try jquery........I get theLink as "var theLink = document.getElementById(theLinkID)" (part of a larger codebase which i can not change)......how can I use mouseover function on theLink object? Is there a way? or in .setAttribute method....can i stop event propagation? Thanks

Adam Ayres Over a year ago

If you decide to use jQuery and you could do this: $(theLink).mouseover(function() { //return false to stop propogation });. Using native JavaScript event handling methods can be tricky, here are many solutions: quirksmode.org/blog/archives/2005/09/addevent_recodi.htmlhere is a simple one: ejohn.org/projects/flexible-javascript-events To stop events search this page for stopPropagation: quirksmode.org/js/events_order.html

meouw · Accepted Answer · 2011-03-10 09:04:10Z

An answer with cross browserness included

function doSomething( event ) {
    if( console && console.log ) {
        console.log( this );
        console.log( event );
    }
    else {
        alert( this === window ? 'WINDOW' : this.tagName );
        alert( event );
    }
}


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

// `this` within your handler will be `window` and not the link
link1.setAttribute( 'onMouseOver', 'doSomething( event )' ); 

// to attach event listeners you have to do a bit more work
// ( best to make a function rather than doing this each time
if( document.addEventListener ) {
    // compliant browsers
    link2.addEventListener('mouseover', doSomething, false);
} else {
    // internet explorer
    link2.attachEvent( 'onmouseover', function() {
        // grab the event object from the window
        var e = window.event;
        // normalise it a bit i.e. make it a bit more like a compliant browsers event object
        e.target = e.srcElement;
        e.preventDefault = function(){ e.returnValue = false };
        e.stopPropagation = function(){ e.cancelBubble = true };
        // and forward to your handler making sure that `this` is properly set
        doSomething.call( this, e );
    });
}

link3.onclick = doSomething;

Note Avoid wrapping your handlers in unecessary anonymous functions, it's wastefull and you lose the this in the handler
so instead of

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

just assign the handler directly

link3.onclick = doSomething;

Collectives™ on Stack Overflow

Trouble in Javascript event handling

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related