event handling error

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • dmjpro
    Top Contributor
    • Jan 2007
    • 2476

    event handling error

    my HTML code ...
    Code:
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    	<td id=tabbed_TD>Debasis Jana</td>
    </tr>
    </table>
    and my JS code ..
    Code:
    function TDClass(){
    	this.handle = function(){
    		alert(this);
    	}
    }
    
    function test(){
    	document.getElementById('tabbed_TD').addEventListener('click',new TDClass().handle,false);
    }
    Now my question is ... inside handle function this says the current clicked TD cell..how? As it supposed to say TDClass object itself.
    Please explain..
  • Dormilich
    Recognized Expert Expert
    • Aug 2008
    • 8694

    #2
    As it supposed to say TDClass object itself.
    it’s not, all event listeners (and some other functions like setTimeout, setInterval) change the scope of the current object (this is no bug, but intended).

    this behaviour allows you to execute code on a DOM Node without explicitly writing the code to that object beforehand. i.e. it allows you to create re-usable code.

    JavaScript Scope @ Digital Web Magazine

    if you need to preserve the object’s context, you have to use Closures.
    Code:
    vat tdc = new TDClass();
    document.getElementById('tabbed_TD').addEventListener('click', tdc.handle.bind(tdc), false);
    Code:
    Function.prototype.bind = function (obj) {
        var fn = this;
        return function () {
            return fn.apply(obj, arguments);
        }
    };
    note: standard compliant browsers still pass the event object as first argument to the function.
    Last edited by Dormilich; Jul 30 '10, 11:12 AM.

    Comment

    • dmjpro
      Top Contributor
      • Jan 2007
      • 2476

      #3
      This link is real GEM. Some absurd/typical things just used to go beyond my brain. Those things, exactly those things...contex t of execution, this in different context and more over apply and call, the clear concept of those hazy things are now clear.

      It would be grateful, if you do little more help...

      Code:
      <input type=button value=' Button ' onclick='e_handler(12,34,"debasis jana")' />
      In the above code e_handler takes 3 inputs, if I register the e_handler through Javascript function then how would I pass those 3 parameters?
      Is it possible?

      Comment

      • Dormilich
        Recognized Expert Expert
        • Aug 2008
        • 8694

        #4
        you have to use a Closure or a Partial.

        Comment

        • dmjpro
          Top Contributor
          • Jan 2007
          • 2476

          #5
          Ahh! ..so there is no direct way. What you mean by partial??

          Comment

          • Dormilich
            Recognized Expert Expert
            • Aug 2008
            • 8694

            #6
            a Partial is related to the Lambda-Calculus (something awfully complicated).

            a Partial implementation
            Last edited by Dormilich; Aug 3 '10, 06:09 AM.

            Comment

            Working...