Using addEventListener to add a callback with arguments

Question

I'm creating a drag and drop system using a canvas.

      canvas.addEventListener('mousedown', function () {
          window.initialClickX = mouse.x;
          window.initialClickY = mouse.y;
          window.initialBallX = ball.x;
          window.initialBallY = ball.y;
          canvas.addEventListener('mousemove', onMouseMove, false);
      }, false);

     function onMouseMove(){
        ball.x = mouse.x + window.initialBallX - window.initialClickX;
        ball.y = mouse.y + window.initialBallY - window.initialClickY;
        draw();
     }

When I click, I need to store the values for the initial mouse position and the initial ball position, so I can correctly drag the ball around.

The above code works perfectly, but I think it looks messy with all the global variables. I'd like onMouseMove to be able to accept the parameters initialClickX, initialClickY, initialBallX and initialBallY. But how can I add these parameters to the callback function?

Or if there is a better way to do this please let me know, thanks.

Solution 1

Try using a wrapper function to do it.

canvas.addEventListener('mousedown', function () {
      var initialClickX = mouse.x;
      var initialClickY = mouse.y;
      var initialBallX = ball.x;
      var initialBallY = ball.y;

      canvas.addEventListener('mousemove', function() {
          onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY)
      }, false);

}, false);

function onMouseMove(initialClickX, initialClickY, mouseX, mouseY, initialBallX, initialBallY){
    ball.x = mouseX + initialBallX - initialClickX;
    ball.y = mouseY + initialBallY - initialClickY;
    draw();
}

Solution 2

Here is a small example of how you could do that without using global variables:

function called() {
  console.log(arguments);
}

function caller(funx) {
  funx();
}

caller(called.bind(this, 'a', 'b'));

Basically you are setting onto called a set of predefined parameters, in this case 'a' and 'b'.

So in your case it is something like:

canvas.addEventListener('mousedown', function () {
  canvas.addEventListener('mousemove', 
    onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false);
}, false);

Solution 3

Use a wrapping function stub which sets the parameters:

canvas.addEventListener('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });

Comments

[Mathias Lykkegaard Lorenzen]

My first solution didn't handle initialBallX and initialBallY properly. This one does. No global variables. Just pure awesome.

[Muaaz Khalid]

what if we are in a class that attach the event with a callback function and few parameters, does that function would be declared outside the class? that's annoying.