Attaching event to elements

Hi,

I'm aware of 2 different methods to attach events to elements:
<div id="attach">text</div>
document.getElementById("attach").onclick=function () {// something}
<div id="attach">text</div>
function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
addEvent(document.getElementById("attach", "click", something);

I'm sure there's a difference, because after all - someone wrote addEvent function for a reason, so I guess in some cases - using onclick isn't the best thing to do.

What I don't understand is this: when should I use each one of these methods? when onclick is better and when addEvent function? what is the difference?

Thanks a lot.

the first - ").onclick=function - replaces existing inline onclick events

the second - function addEvent( -adds to any existing onclick events

http://www.quirksmode.org/sitemap.html#link9 is informative. There’s actually a third method to attach events too: addEventListener().

There’s actually a third method to attach events too: addEventListener().

…which is rolled into most, if not all, custom 'addEvent()'-type functions, which double-up so as to support both W3C DOM methods and IE's DOM methods (as shown in the OP's posted code examples).
(Whether the customised function uses the addEvent name or reuses the same name as the W3C method is largely academic.)

…fwiw.

(as shown in the OP's posted code examples).Yeah, I missed that fact. The link is still useful though.

(Whether the customised function uses the addEvent name or reuses the same name as the W3C method is largely academic.)If you mean that they’re the same, this page (http://www.quirksmode.org/js/events_advanced.html#link7) says otherwise. I wouldn’t know how important the differences are though.

If you mean that they’re the same, this page (http://www.quirksmode.org/js/events_advanced.html#link7) says otherwise. I wouldn’t know how important the differences are though.
No worries. I put that in just in case you were referring to another 3rd-party, custom function (like addEvent) published elsewhere, but which had been given the name addEventListener, as if to serve as a straight replacement for the official W3C method of that name.

It's all good. :)

No worries. I put that in just in case you were referring to another 3rd-party, custom function (like addEvent) published elsewhere, but which had been given the name addEventListener, as if to serve as a straight replacement for the official W3C method of that name.Gah. I didn’t realize he made up an event named addEvent either; thought he was using attachEvent.

* makes mental note to read posts more thoroughly *