SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using addEventListener or the predefined eventsl like onclick, onload etc

    Hi,

    I have been reading and practicing Javascript for the last month and so far I’m happy with it. I noticed that you can add Event Listeners and trigger a function based on that event but I also noticed that you could add an event directly to any element as an attribute, something like…
    Code:
    <p  onclick="doSomething()">Click Me</p>
    function doSomething(){
    //do something 
    }
    So my question is why would someone add and event listener instead of adding that event directly in the element (as the sample above)?

    The reason I’m asking is because adding event listeners involves more code…

    Code:
    var elementName= document.getElementById('elemenstsID');
    elementName.addEventListener(“click”, doSomething, false);
    I guess what I don’t know understand is why would someone choose to add an event listener instead, I know it is more OOP but doesn’t the “onclick”,“onload” etc do the same thing?

    Sorry if my question doesn’t make any sense.

    Thanks
    Thank you very much!!!

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think code is cleaner when you separate events from html.

    Also assigning events in javascript prevents situations when event gets fired before your script finished setting up variables and stuff, so you can first setup all stuff (load images, create variables, make sure whole page is loaded, etc..) and then assign events.

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply! Make sense.
    Thank you very much!!!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,804
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    A listener also allows you to attach additional code to an event without affecting whatever might already be attached.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!
    Thank you very much!!!


Bookmarks

Posting Permissions

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