Assigning elements to classes to control events

Assigning elements to classes to control events

I'm trying to use a javascript class to assign specific event handlers to different elements. I create an object and pass it a reference to the element, and some properties for the event handler to use. When the event fires, I want the handler to reference the properties of the object. But I'm clearly doing something wrong as multiple instances all refer to the most recent object only.

Any pointers?

  1. <script>
  2. function constrainTextarea(ele,maxlength)
  3. {
  4. this.ele = $("#"+ele);
  5. this.maxlength=maxlength;
  7. this.listen = function(){
  8. alert("I'm listening! "+this.ele.attr('id'));
  9. };
  10. this.unlisten = function(){
  11. alert("stop listening "+this.ele.attr('id'));
  12. };
  14. $(this.ele).focus(function(e){self.listen();});
  15. $(this.ele).blur(function(e){self.unlisten();});
  16. }

  18. $(document).ready(function(){
  19. cta1 = new constrainTextarea('ta1',200);
  20. cta2 = new constrainTextarea('ta2',200);
  21. });

  23. </script>
  24. <textarea id=ta1></textarea>
  25. <textarea id=ta2></textarea>