Jump to content

Event listener "black box", what am i doing wrong?


GBeebe
 Share

Recommended Posts

First off, Hi. I've been a member for a while, but this is my first posted question. I've been able to google my answers thus far, however I'm now stumped...

 

I'm working on a level editor for a game, which has multiple canvases (tileset, map, objects, etc...). I figured, instead of writing separate event listeners for each canvas, I'd write a black box styled function that had all the code I needed, however, I'm not being quite successful:

<html>  <head>    <title>test</title>  </head>	  <body>    <div id="textOut"></div>    <div id="boxTest" style="width: 300px; height: 300px; background-color: #000000;">	</div>		    <script type="text/javascript">      function addListener(element) {        //holds the mouse coords on this element        this.mouseX = 0;	//I want these to be set by the mouseMove event.        this.mouseY = 0;        this.self = this;	  			        //the mouse move listener        this.mouseMove = function(event) {          //i tried this.that.mouseX (set below) but it gives me an error.          self.mouseX = event.x;	//doesn't throw an error, but doesn't change the desired variables.          self.mouseY = event.y;        }        //this is a little trick that works with image onloads, but apparently not with listeners        this.mouseMove.that = this;        //attach listeners to the element        element.addEventListener('mousemove', this.mouseMove, false);      }			      //create the listener       var listen = new addListener(document.getElementById('boxTest'));			      //supposed to display the mouse coords on boxTest in textOut.      function hear() {        document.getElementById('textOut').innerHTML = listen.mouseX + ", " + listen.mouseY;        setTimeout(hear, 10);      }      hear();    </script>  </body></html> 

My issue here is, each instance has it's own mouseX and mouseY, but I can't figure out how to get the listener to assign the variables.  A little help here?

 

Thanks in advance, 

 

Gary.

 

 

Link to comment
Share on other sites

... I 'kinda' solved it, I guess. I just applied the variables to the element, but I've read that it's not a proper thing to do...

<html>  <head>    <title>test</title>  </head>	  <body>    <div id="textOut"></div>    <div id="boxTest" style="width: 300px; height: 300px; background-color: #000000;">    </div>    	    <script type="text/javascript">      function addListener(element) {        element.mouseX = 0;	element.mouseY = 0;				  	element.onmousemove = function(event) {    	  this.mouseX = event.x - this.offsetLeft;	    	  this.mouseY = event.y - this.offsetTop;        }      }			      //create the listener       var e = document.getElementById('boxTest');      addListener(e);			        function hear() {        document.getElementById('textOut').innerHTML = e.mouseX + ", " + e.mouseY;        setTimeout(hear, 10);      }      hear();    </script>  </body></html>
Link to comment
Share on other sites

Your first try was close, but has a few mistakes. I think you need something more like this:

 

function addListener(element) {
    //holds the mouse coords on this element
    this.mouseX = 0;    //I want these to be set by the mouseMove event.
    this.mouseY = 0;
                 
    //attach listeners to the element
    var that = this;
    element.addEventListener(
        'mousemove',
        function(e) {
            that.mouseX = e.clientX;
            that.mouseY = e.clientY;
        },
        false
    );
}
 

The thing to understand is that in an event handler function, 'this' refers to the element firing the event. However, within an anonymous function you still have access to the local variables within the scope of the outer function - even after that function has exited, those variables will be remembered. So inside the event handler, you can still access the 'that' variable, which we previously assigned to the object we want to reference.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...