Cross-Browser.com

The DOM2 Event Interface allows multiple listeners for the same event on the same object.

One benefit provided by addEventListener is the ability to add more than one listener for the same event to the same element object. For example, it's common to have two scripts on a page where each of them need a document.onmousemove listener. In this case use the DOM2 Event Interface. Otherwise I would use the DOM0 Event Interface because of current browsers' more consistent this semantics.

In a listener added with addEventListener, this will reference the object to which the listener was added.

When you use xAddEventListener you need to be aware of what it is doing. It will use ele.addEventListener if it is available, else it will use ele.attachEvent if it is available, else it will use the DOM0 Event Interface.

Internet Explorer does not support the DOM2 Event Interface so ele.attachEvent will be used. Like addEventListener, it also allows multiple listeners for the same event on the same object. However, attachEvent has a major drawback... in the listener, this will always reference the document object, whereas in a listener added with addEventListener this will properly reference the object to which the listener was added.

The DOM0 Event Interface provides this benefit naturally. You assign a function reference to an event handler property of an Element object. When the event fires, your function is called within the context of the Element object. In the listener this will reference the object to which the listener was added.

The last parameter of addEventListener allows you to specify whether the event should be captured before it is dispatched to any decendants of this object. This listener will not receive At-Target events, but capturing can be useful.

As far as I know, only IE and Opera7 have consistently supported the window.onscroll event, and browser support for window.onresize is not much better. xAddEventListener simulates both these events for any browser other than IE and Opera7.

Note that you can still use xEvent, even if you don't use xAddEventListener. Remember that xEvent is an object prototype.

• This browser identifies itself as:
   
• This browser is rendering this page in   mode.
• document.compatMode does not exist.

• This browser   the DOM2 Event Interface (ele.addEventListener).
• This browser   the IE Event Interface (ele.attachEvent).
• xAddEventListener   simulate the window resize and scroll events for this browser.