What is the difference between these ways of attaching events?

Question

<div id="myDiv" onclick="MyFunc()"></div>
document.getElementById("myDiv").onclick = MyFunc;
document.getElementById("myDiv").addEventListener("click", MyFunc, false)

Now, what is the difference between these 3 ways of attaching an event to a DOM element (ignoring the fact that 3 won't work on IE)?

They all call `MyFunc` on click. Difference in terms of what? — Blaster, Jul 06 '12 at 18:42
IE doesn't like `addEventListener` but it works with [`attachEvent`](http://msdn.microsoft.com/en-us/library/ie/ms536343(v=vs.85).aspx) instead — MilkyWayJoe, Jul 06 '12 at 18:42
[This answer](http://stackoverflow.com/a/6348597/219118) provides a pretty good explanation. Really there is no difference though.. all do the same thing. — sachleen, Jul 06 '12 at 18:43
using addeventlistner "this" varible inside MYFunc function will always refer to calling object which is myDiv instead of window object if you simply write onclick() event in plain html — Ajay Beniwal, Jul 06 '12 at 18:43
possible duplicate of [addeventhandler vs onclick](http://stackoverflow.com/questions/6348494/addeventhandler-vs-onclick) — Andreas Louv, Jul 06 '12 at 18:46

Mitya · Accepted Answer · 2012-07-06T19:01:05.740

Methods A and B

These are known as DOM level zero events and are somewhat old school. Method A declares it in-line in your HTML (bad) where as method B does the same thing but centrally, in your JS.

With method A, the attribute value is a string of valid JS that, on firing, will be evaluated (also bad). Due to the position in which the event is being bound, this means any functions referenced in this string must be global (or globally accessible methods). With method B, the event is bound centrally, in your JS, rather than inline.

The main caveat with them, aside from being outdated and simplified, is that you can bind only one kind of event per element. If you attempt to bind two click event handlers to the same event handler with this mechanism, the first will be forgotten. This stands to reason, since you are simply overwriting an element attribute.

Method C

addEventListener is the standard for attaching events. For a long time, IE didn't support this, favouring its equivalent attachEvent method. Some differences between them include:

attachEvent does not allow capturing of events (param 3 of addEventListener allows this)
with attachEvent, the event object (i.e. the object that stores information about the fired event) is accessed on window.event, whereas with addEventListener it is forwarded as the only argument to the callback
with attachEvent, event names must be prefixed with on, e.g. onClick. addEventListener requires simply click
with addEventListener, the this keyword inside the callback points to the element that triggered the event. In attachEvent you have to decipher this yourself by extrating the element from properties within the event (window.event) object

IE9 came into line and supports addEventListener.

A and B are _not_ the same thing - A requires that the passed string be converted into a real function into `eval` and any function call therein must be in the global scope, whereas B can use any real direct function reference, even if it's in some restricted scope. — Alnitak, Jul 06 '12 at 18:52
@Alnitak - you are right; I was simply referring to the fact that both are simply different means of attaching DOM 0 events. Editing... — Mitya, Jul 06 '12 at 18:56

What is the difference between these ways of attaching events?

1 Answers1