Loading ...
Sorry, an error occurred while loading the content.

Event and "this"

Expand Messages
  • Peter Michaux
    Hi, I m brand new to the Yahoo! library. I ve been trying to learn how to use the Yahoo! event library. I am running into trouble with the following example. I
    Message 1 of 2 , Apr 3, 2006
    • 0 Attachment
      Hi,

      I'm brand new to the Yahoo! library. I've been trying to learn how to
      use the Yahoo! event library. I am running into trouble with the
      following example. I imagine this is straight forward to fix but I
      don't know how the automatic scoping might affect this.

      When I mouseover the div I see "Error this.element has no properties".

      I hope the first two arguments to addListener() are ok because I will
      need to use "this.element" to set listeners in methods other than the
      constructor.

      Any ideas?

      Thanks,
      Peter


      <html>
      <head>
      <script src="javascripts/yahoo/YAHOO.js"
      type="text/javascript"></script>
      <script src="javascripts/yahoo/event.js"
      type="text/javascript"></script>

      <script type="text/javascript">
      function Item(element) {
      this.element = element;
      YAHOO.util.Event.addListener(this.element, "mouseover",
      this.overHandler, this);
      YAHOO.util.Event.addListener(this.element, "mouseout",
      this.outHandler, this);
      }
      Item.prototype.overHandler = function(event) {
      this.element.style.background = "red";
      };
      Item.prototype.outHandler = function(event) {
      this.element.style.background = "green";
      };
      </script>

      </head>
      <body>

      <div id="my_div"
      style="height:80px;width:80px;background:cornflowerblue;">
      mouseover me!
      </div>

      <script>
      var d = new Item(document.getElementById("my_div"));
      </script>

      </body>
      </html>
    • Peter Michaux
      ... I think I figured it out. YAHOO.util.Event.addListener(this.element, mouseover , this.overHandler, this, true); YAHOO.util.Event.addListener(this.element,
      Message 2 of 2 , Apr 3, 2006
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "Peter Michaux"
        <petermichaux@...> wrote:

        > YAHOO.util.Event.addListener(this.element, "mouseover",
        > this.overHandler, this);
        > YAHOO.util.Event.addListener(this.element, "mouseout",
        > this.outHandler, this);

        I think I figured it out.

        YAHOO.util.Event.addListener(this.element, "mouseover",
        this.overHandler, this, true);
        YAHOO.util.Event.addListener(this.element, "mouseout",
        this.outHandler, this, true);

        Thanks,
        Peter
      Your message has been successfully submitted and would be delivered to recipients shortly.