SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event listeners and arguments

    As I'm new to JavaScript events, I don't know what to search to find answer for my question. If there is some threads about it, please post links.

    Here's the question

    Old school way to start some event is like this:
    Code HTML4Strict:
    <div onclick="edit_comment(1);">Comment 1</div>
    <div onclick="edit_comment(2);">Comment 2</div>

    But Simply JavaScript (I'm not finished reading it) recommends to add event listeners. There is no problem if function doen't have any arguments, but if that function can have arguments, then how can I get the right argument?


    Greetings,
    Sander

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Code javascript:
    el.onclick = function () {
        fn(arg1);
    }

    The this keyword refers to the element that fired the event, so you can use this.id to pass the identifier of the element, and other techniques to keep the script as generic as possible.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that I understand.

    But what if I need to pass more than one argument, the old way is like that: edit_comment(arg1, arg2, arg3, ...). Then using element's identifier is not enough anymore.


    Sander

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Just supply more arguments, for example

    Code javascript:
    el.onclick = function () {
        fn('myIdentifier', 10, 'west', 'foo', 'bar', 'humbug');
    }

    or

    Code "javascript':
    el.onclick = function () {
        fn('myIdentifier', {top: 10, left: 20, title: "A title", radius: 12, border: 'sharpened'});
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that I also understand. Your given code is good when I have one such event listener.

    But what if event listener has to catch dynamically set variables, variables which come from database queries and there are many calls to edit_comment(arg1, arg2, arg3, ...), every call has different argument values.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    To provide an appropriate answers requires a proper understanding of the situation in question.

    Please provide some examples of the different arguments values from the database queries that the event listener will be expected to handle.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •