Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Attaching event to elements

    Hi,

    I'm aware of 2 different methods to attach events to elements:
    Code:
    <div id="attach">text</div>
    document.getElementById("attach").onclick=function () {// something}
    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,498
    Thanks
    3
    Thanked 500 Times in 487 Posts
    the first - ").onclick=function - replaces existing inline onclick events

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    http://www.quirksmode.org/sitemap.html#link9 is informative. There’s actually a third method to attach events too: addEventListener().
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Arbitrator View Post
    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.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Bill Posters View Post
    (as shown in the OP's posted code examples).
    Yeah, I missed that fact. The link is still useful though.

    Quote Originally Posted by Bill Posters View Post
    (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 says otherwise. I wouldn’t know how important the differences are though.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Arbitrator View Post
    If you mean that they’re the same, this page 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.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Bill Posters View Post
    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 *
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •