an event-handing question in javascript

Question

If I define a function like this:

function doSomething()
{
 this.style.color = '#cc0000';
}

Do

element.attachEvent('onclick',doSomething)

and

element.addEventListener('click',doSomething,false)

get the same result? And why?Thanks a lot.

• RobG: No. When using attachEvent in IE, the listener's this keyword is set differently to how it is set by addEventListener in every other browser. In IE, this within the function will be window, in other browsers it will be the element that the listener is attached to.
• Dori: Am I correct that this code is from this page on PPK's QuirksMode site? What, specifically, are you having trouble with in his explanation?

Answer 1

Yes, but in different browsers.

• attachEvent is the method you have to use in IE.

• addEventListener is available in all other browsers (Firefox, Chrome, Safari, Opera, etc). It is the W3C standard. IE9 tries to be more compatible with W3C and supports it too.

I suggest to read Advanced event registration models which explains the browser differences quite well.

You should also read the other articles about events on quirksmode.org. They will give you a good in event handling in general.

• Han Dijk: IE9 supports addEventListener nowadays
• Tim Down: this will be the global object inside doSomething() using attachEvent() whereas it will be the element using addEventListener, so the OP's code won't work in the first case.
• Felix Kling: @TimDown: Oh really? I didn't know that (clearly I don't have so much practical IE experience ;)).
• Tim Down: Yep, definitely. I'd suggest adding a note to your answer for future readers, because it's misleading at the moment: the OP's code won't work in IE because of the this problem.

Answer 2

Pretty much, addEventListener is the W3C way of adding events and supported by most browsers, while attachEvent is an IE thing and supported mainly by them. Read more.