Mouse events, classes, handlers

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • fuubaa
    #1

    Mouse events, classes, handlers

    This below would be my ideal code.... if it worked.

    <html><head><sc ript>

    function mouseDownClass( o){

    this.o = o;

    this.handleMous eUp = function() {
    alert(this);

    }
    //treating this section as the constructor (which sets up the mouseup
    listener as the method of an instantiation, ideally)
    document.body.a ddEventListener ("mouseup",this .handleMouseUp, false);

    }

    </script></head><body>

    <button id="b1" onmousedown="ne w mouseDownClass( this,event)">Do wn
    -&gt; Up</button>

    </body></html>

    alert() is showing 'this' to as: [object HTMLBodyElement] whereas i'm
    looking for it to show [object Object], (On Firefox at least),
    referring to the object instantiated when the mouse goes down on the
    button. I'd appreciate anyone who can help me here?
    Thanks in advance
    Jody

    Tags: None
    • Thomas 'PointedEars' Lahn
      #2
      Re: Mouse events, classes, handlers

      fuubaa wrote:
      [color=blue]
      > This below would be my ideal code.... if it worked.[/color]

      Since it is fantasy code, it cannot work.
      [color=blue]
      > <html><head><sc ript>[/color]

      Not at all Valid. <URL:http://validator.w3.or g/>
      [color=blue]
      > function mouseDownClass( o){[/color]

      There are no classes in the used ECMAScript implementation, BTW.
      [color=blue]
      > this.o = o;
      >
      > this.handleMous eUp = function() {
      > alert(this);
      >
      > }
      > //treating this section as the constructor[/color]

      Nonsense. `mouseDownClass ' is the constructor of the object created with
      the NewExpression.
      [color=blue]
      > (which sets up the mouseup listener as the method of an instantiation,[/color]
      ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^[color=blue]
      > ideally)[/color]

      Nonsense. It adds the Function object referred to by this.handleMous eUp
      (that could have been any other Function object as well, it would not have
      make a difference) as event listener for the `mouseup' event.
      [color=blue]
      > document.body.a ddEventListener ("mouseup",this .handleMouseUp, false);
      >
      > }
      >
      > </script></head><body>
      >
      > <button id="b1" onmousedown="ne w mouseDownClass( this,event)">Do wn
      > -&gt; Up</button>[/color]

      So when the `mousedown' event occurs for the `button' element as event
      target, you create a new object. Which is completely unnecessary.

      And <input type="button" ...> would have sufficed here.
      [color=blue]
      > alert() is showing 'this' to as: [object HTMLBodyElement][/color]

      And rightfully so. You added the event listener to the element
      represented by the element object referred to with `document.body' .
      When its `mouseup' event occurs, the Function code is called by
      this object. And `this' refers to the caller in function code.
      [color=blue]
      > whereas i'm looking for it to show [object Object],[/color]

      function ...(...)
      {
      var me = this;

      this.handleMous eUp = function()
      {
      alert(me);
      }

      ...
      }

      Note that this creates a closure involving DOM objects which is
      prone to the IE memory leak problem.


      PointedEars

        Comment

        Previous template Next
        Working...