You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by snapper <jc...@snapdragonmedical.com> on 2006/11/14 00:35:20 UTC

addEventListener bug this=window

How can I get object reference instead of window reference in
this.handleEvent(evt)?

I have ECMAScript in a Batik SVG application using widgets. I noticed that
the Carto textbox does not work in Batik due to event handing problems, so I
am rewriting it. Andreas attached event handlers using the root element in
all cases, which causes many problems. I am attaching events to the widget
elements instead like this:

this.textboxRect.addEventListener("click",this._handleEvent,false);

The event handler in the textbox object does receive the event, but inside
the this.handleEvent(evt), the "this" refers to the window object. We really
want the reference to the textbox object.

How can I get the reference to the textbox object inside the event handler
in this case?
-- 
View this message in context: http://www.nabble.com/addEventListener-bug-this%3Dwindow-tf2626185.html#a7328449
Sent from the Batik - Users mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org


Re: addEventListener bug this=window

Posted by snapper <jc...@snapdragonmedical.com>.
I could not figure out exactly how to implement that code, but I did figure
out a similiar way that works now:

textbox.prototype.bind=function(obj,fn){
	return function(e){
		fn.call(obj,e);
	}
}

this.textboxRect.addEventListener("click",this.bind(this,this.handleEvent),false);

It works!


snapper wrote:
> 
> ? So if the event is attached with:
> this.textboxRect.addEventListener("click",this,false);
> 
> and I use your exact "bind" method,
> then the exact code for the handler is:
> 
> textbox.prototype.handleEvent=bind(textbox,function(evt){
>   alert(this);
> });
> 
> The alert gives:
> org.mozilla.javascript.gen.c790@1e9262d
> 
> "this" is still not working... What is wrong here?
> 
> Cameron McCormack-4 wrote:
>> 
>> Hi.
>> 
>> snapper:
>>> How can I get object reference instead of window reference in
>>> this.handleEvent(evt)?
>>> 
>>> I have ECMAScript in a Batik SVG application using widgets. I noticed
>>> that
>>> the Carto textbox does not work in Batik due to event handing problems,
>>> so I
>>> am rewriting it. Andreas attached event handlers using the root element
>>> in
>>> all cases, which causes many problems. I am attaching events to the
>>> widget
>>> elements instead like this:
>>> 
>>> this.textboxRect.addEventListener("click",this._handleEvent,false);
>>> 
>>> The event handler in the textbox object does receive the event, but
>>> inside
>>> the this.handleEvent(evt), the "this" refers to the window object. We
>>> really
>>> want the reference to the textbox object.
>>> 
>>> How can I get the reference to the textbox object inside the event
>>> handler
>>> in this case?
>> 
>> This is normal behaviour: when you refer to this._handleEvent, it is
>> just a reference the function that has been stored in the 'this'
>> object–it has lost its association with the object.  If you want to be
>> able to access the 'this' object from _handleEvent, you can refer to
>> the object from the closure when you assign it.  For example:
>> 
>>   blah._handleEvent = function(evt) {
>>       // refer to 'blah' in here
>>   };
>> 
>> I often use a function to bind the the 'this' variable to an object of
>> my choosing, so that I can do what you want to do.
>> 
>>   function bind(_this, f) {
>>       var _ = function() {
>>           return f.apply(_this, arguments);
>>       };
>>       _.toString = function() {
>>           return "/* bound function */\n" + String(f);
>>       };
>>       return _;
>>   }
>> 
>> and then:
>> 
>>   blah._handleEvent = bind(blah, function() {
>>       // now 'this' inside here will always refer to 'blah',
>>       // regardless of how the function was called.
>>   });
>> 
>> -- 
>> Cameron McCormack, http://mcc.id.au/
>> 	xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au
>> 
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>> 
>> 
>> 
> 
> 

-- 
View this message in context: http://www.nabble.com/addEventListener-bug-this%3Dwindow-tf2626185.html#a7346695
Sent from the Batik - Users mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org


Re: addEventListener bug this=window

Posted by snapper <jc...@snapdragonmedical.com>.
? So if the event is attached with:
this.textboxRect.addEventListener("click",this,false);

and I use your exact "bind" method,
then the exact code for the handler is:

textbox.prototype.handleEvent=bind(textbox,function(evt){
  alert(this);
});

The alert gives:
org.mozilla.javascript.gen.c790@1e9262d

"this" is still not working... What is wrong here?

Cameron McCormack-4 wrote:
> 
> Hi.
> 
> snapper:
>> How can I get object reference instead of window reference in
>> this.handleEvent(evt)?
>> 
>> I have ECMAScript in a Batik SVG application using widgets. I noticed
>> that
>> the Carto textbox does not work in Batik due to event handing problems,
>> so I
>> am rewriting it. Andreas attached event handlers using the root element
>> in
>> all cases, which causes many problems. I am attaching events to the
>> widget
>> elements instead like this:
>> 
>> this.textboxRect.addEventListener("click",this._handleEvent,false);
>> 
>> The event handler in the textbox object does receive the event, but
>> inside
>> the this.handleEvent(evt), the "this" refers to the window object. We
>> really
>> want the reference to the textbox object.
>> 
>> How can I get the reference to the textbox object inside the event
>> handler
>> in this case?
> 
> This is normal behaviour: when you refer to this._handleEvent, it is
> just a reference the function that has been stored in the 'this'
> object–it has lost its association with the object.  If you want to be
> able to access the 'this' object from _handleEvent, you can refer to
> the object from the closure when you assign it.  For example:
> 
>   blah._handleEvent = function(evt) {
>       // refer to 'blah' in here
>   };
> 
> I often use a function to bind the the 'this' variable to an object of
> my choosing, so that I can do what you want to do.
> 
>   function bind(_this, f) {
>       var _ = function() {
>           return f.apply(_this, arguments);
>       };
>       _.toString = function() {
>           return "/* bound function */\n" + String(f);
>       };
>       return _;
>   }
> 
> and then:
> 
>   blah._handleEvent = bind(blah, function() {
>       // now 'this' inside here will always refer to 'blah',
>       // regardless of how the function was called.
>   });
> 
> -- 
> Cameron McCormack, http://mcc.id.au/
> 	xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
> 
> 
> 

-- 
View this message in context: http://www.nabble.com/addEventListener-bug-this%3Dwindow-tf2626185.html#a7339308
Sent from the Batik - Users mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org


Re: addEventListener bug this=window

Posted by Cameron McCormack <ca...@mcc.id.au>.
Hi.

snapper:
> How can I get object reference instead of window reference in
> this.handleEvent(evt)?
> 
> I have ECMAScript in a Batik SVG application using widgets. I noticed that
> the Carto textbox does not work in Batik due to event handing problems, so I
> am rewriting it. Andreas attached event handlers using the root element in
> all cases, which causes many problems. I am attaching events to the widget
> elements instead like this:
> 
> this.textboxRect.addEventListener("click",this._handleEvent,false);
> 
> The event handler in the textbox object does receive the event, but inside
> the this.handleEvent(evt), the "this" refers to the window object. We really
> want the reference to the textbox object.
> 
> How can I get the reference to the textbox object inside the event handler
> in this case?

This is normal behaviour: when you refer to this._handleEvent, it is
just a reference the function that has been stored in the 'this'
object–it has lost its association with the object.  If you want to be
able to access the 'this' object from _handleEvent, you can refer to
the object from the closure when you assign it.  For example:

  blah._handleEvent = function(evt) {
      // refer to 'blah' in here
  };

I often use a function to bind the the 'this' variable to an object of
my choosing, so that I can do what you want to do.

  function bind(_this, f) {
      var _ = function() {
          return f.apply(_this, arguments);
      };
      _.toString = function() {
          return "/* bound function */\n" + String(f);
      };
      return _;
  }

and then:

  blah._handleEvent = bind(blah, function() {
      // now 'this' inside here will always refer to 'blah',
      // regardless of how the function was called.
  });

-- 
Cameron McCormack, http://mcc.id.au/
	xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org