468,525 Members | 2,130 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,525 developers. It's quick & easy.

Raised event not using correct handler

I've got an issue where I've created a prototype that contains 2 methods, and a few private variables. The first method simply registers the second method to be an event handler for the mousedown event.

This prototype is instanced for each instance of a server control. Basically it's an asp panel and for each one on the aspx webpage, an instance of my JavaScript prototype is created. Okay, so, when the prototype is instanced (
var myctlinst = new myPrototype(ctlid);), I pass in some parameters (the xhtml ID of the <div /> that encapsulates the control), and I fire the event registration method for the appropriate browser.
Now, this is where the trouble appears, I allocate the variable 'me' to reference the instance of the prototype. I then register the event handler method attached to the prototype using (for simplicitys sake I'll use IE - Firefox exhibits the same behaviour) the appropriate method:

Expand|Select|Wrap|Line Numbers
  1.                 document.attachEvent("onmousedown",function(){me.mouseDragCallback(event);});

This works fine, and inspection of 'me.ctlId' shows that it has indeed bound the correct ID of the related xhtml object. The event handler registration code executes correctly, once for each instance of the control on the page. However, when the event handler is fired, it fires the correct number of times, but the handler is always the last object instance to be registered - not the one that was passed in. If I alert 'me.ctlid' it always returns the ID of the last control on the web-page, not the correct instance.

I'm not entirely sure what's going on, since the event is called the correct number of times, but it's always the same object processing it. Any help greatly appericated. Sample code below.



Expand|Select|Wrap|Line Numbers
  1. // Programmatically rendered inline in the aspx page.
  3. /*... for each instance... */
  4. var ctl00_id1_jsobj = new Presentation('ctl00_id1');
  5. var ctl01_id2_jsobj = new Presentation('ctl00_id2');
  6. /*... */
  8. // Contained in an external .js file
  9. Presentation = function(controlInst) 
  10. {
  11.     // Private variables
  12.     me = this;                  
  14.     // Fire constructor!
  15.     this.create.apply(this, arguments);
  16. }
  18. Presentation.prototype =
  19. {
  21.     MYTESTID: null,
  24.     create: function()
  25.     {
  27.         me.MYTESTID = arguments[0];
  29.         me.attachHandlers(false);
  30.     },
  32.     attachHandlers: function(detach)
  33.     {
  35.             if(document.addEventListener)
  36.             {
  37.                 // for Firefox
  38.                 document.addEventListener("mousedown",function(e){me.mouseDownCallback(e);}, false);
  39.             }
  40.             else if(document.attachEvent) 
  41.             {
  42.                 // for IE
  43.                 document.attachEvent("onmousedown",function(){me.mouseDownCallback(event);});
  44.         }
  45.     },
  47.     mouseDownCallback: function(e)
  48.     {
  49.      // me.MYTESTID is always the last control - seems the last instance of this prototype
  50.          // created is processing the mouseDown event for all instances of the control...
  51.          alert(me.MYTESTID);
  52.     }
  54. };
Dec 24 '07 #1
4 1372
210 100+
Expand|Select|Wrap|Line Numbers
  1.  Presentation = function(controlInst) 
  2. {
  3.     // Private variables
  4.     me = this;                  
me is global and therefore is being reassigned.
Dec 25 '07 #2
Ah okay, that makes sense, what would be the correct approach to scope the event handlers?
Dec 27 '07 #3
16,027 Expert Mod 8TB
Ah okay, that makes sense, what would be the correct approach to scope the event handlers?
See this article. Add a 'var'.
Dec 27 '07 #4
5,390 Expert Mod 4TB
hi ...

that is quite true and a silly mistake. have a look at the following example:

Expand|Select|Wrap|Line Numbers
  1. function OBJ(param) {
  2.     foo = param;
  3. }
  5. var o = new OBJ('bar');
  7. alert(foo);
since you didn't declare the variable foo javascript is searching for it in the next 'higher' scope-context and at least creates foo in the window-context ... so the alert will give you 'bar' outside of the OBJ-scope ... when setting mozillas js-debug-level to strict-mode or using firebug you will find such errors very fast ... because the console will show you something like this:

Expand|Select|Wrap|Line Numbers
  1. assignment to undeclared variable foo
kind regards
Dec 31 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by John Paulsson | last post: by
3 posts views Thread by Solel Software | last post: by
1 post views Thread by Brad | last post: by
1 post views Thread by Tumurbaatar S. | last post: by
reply views Thread by Datacop | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.