SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Providing argument to the event listener function

    Hi there,

    I'm sure a lot of us here had this problem, but I can't seem to find the solution anywhere on the net. I am trying to add an event to an object dynamically like this.

    HTML Code:
    myObject.addEventListener("click", eventHandler, false) ;
    
    function eventHandler()
    {
         alert("Hello") ;
    }
    I know that the above will only work on Geko browsers and for IE, I will have to use attachEvent instead of addEventListener. However, my question is how can I pass one or more arguments to the eventHandler function. From my research, and testing, the function eventHandler will accept only one argument and it is always the event itself. How could I resolve this?

    I guess, the javascript clousure could solve this, but I'm still trying to learn it.

    Your help is much appreciated. Thanks a lot.
    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, to do this an anonymous function would be used.

    Gecko browsers aren't the only browsers to support addEventListener(). Many other browsers, including Safari and Opera, support it too.

    I suggest you check out Dean Edwards' event manipulation functions.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Yes, to do this an anonymous function would be used.

    Gecko browsers aren't the only browsers to support addEventListener(). Many other browsers, including Safari and Opera, support it too.

    I suggest you check out Dean Edwards' event manipulation functions.
    Hi there,

    May be I'm missing it somehow, but I can't see how that code is allowing me to pass arguments to event handler functions. If you could explain it a bit, that would be great. Thanks
    With Regards
    Pman
    http://www.pmansLab.com

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well you can use prototype, it is just as easy as you can imagine (at least me )

    Code:
    Event.observe('element_id', 'mouse_down', func_ref);
    and of course the things you would like to do (the closure at the state of art), we use bind method to construct a function with and argument injected

    Code:
    somefunc = function (a,b,c,evt) {
    alert(a) // 1
    alert(b) // 2
    alert(c) // 3
    alert(evt) // Event Object
    }
    
    func_ref = somefunc.bind(window, 1, 2, 3);
    Event.observe($('element_id'), 'mousedown', func_ref);
    hope this helps

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YUI has a useful event system. It is not perfect, but it is well designed and works without modifying Object.prototype. YUI is not based around XmlHttp and eval to load scripts.

    The addListener function can take 1 extra arg. That is all you need. Just one. Pass in an object.

    Code:
    addListener( aDiv, "click", aDivClickHandler, someObject );
    Dean Edwards wrote something like this. I wrote one, too a few years ago.
    My outdated site is down for a while now.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I should have been clearer. I was suggesting that you use Dean Edwards' event manipulation functions in place of calls to attachEvent() and addEventListener().
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use a simple closure method, such as bind in prototype.

    Here show a very basic closure function creation

    Code:
    bind = function (a, b) {
    return function (c) {
    alert(a); // fix by bind method
    alert(b); // fix too
    alert(c); // added in later
    }
    }
    
    // so create the binded function
    f = bind(2,3);
    
    // call function f, plus one more additional params, e.g. evt
    f(evt);

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. Like some of you suggested, I used anonymous function to solve the problem. So, it now looks like this:

    HTML Code:
    function onLoad()
    {
    if(myObject.addEventListener)
    {
    	myObject.addEventListener("click", function () {
                                 objOnClickListener("ab", "cd") ;  } , false ) ;
    }
    else
    {
    	myObject.attachEvent("onclick", function () {
    				objOnClickListener("ab", "cd") ; } ) ;
    }
    }
    
    function objOnClickListener(arg1, arg2)
    {
          alert(arg1) ; alert(arg2) ;
    }
    But my solution here will still have event bubbling in IE. Is there any fix to that? I need to study the closure tricks more. Thanks again.
    With Regards
    Pman
    http://www.pmansLab.com

  9. #9
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a way of doing this:

    Code:
    var tmpVar1 = 'hello1';
    var tmpVar2 = 'hello2';
    
    var x = function(arg1,arg2) {
          return function(){
                             alert (arg1);
                             alert(arg2);
                     };
    }(tmpVar1,tmpVar2);
    Then you attach this to an event like: element.addEventListener('click',x);
    Be careful because addEventListener is not cross browser.

    With this method you can even preserve iterations like:

    Code:
    for (var i=0; i < 10; i++) {
          var x = function(arg1) {
                 return function(){
                                    alert (arg1);
                          };
          }(i);
    
          elm.addEventListener('click',x);
    
    }
    Hope this helps the problem of attaching functions with arguments to events.

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •