How to return value from addEventListener

Question

I use Javascript to catch the x and y position for when user clicks a link.

I can make it work, but I want it to return the two values to function init() when it is called.

How can I do it?

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", init, false);

  function init()
  {
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", getPosition, false);
    
    // how can I get the return values here?

  }

  function getPosition(event)
  {
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("canvas");

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }
    else
    {
      x = event.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    }

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

    alert("x: " + x + "  y: " + y); // here can print the correct position
    
    // if I add the two values here, and return them. How can I receive the values in funciton init()
    // var clickPosition={"x":x, "y":y};
    // return clickPosition;
  }

</script>

Answer 1

Where you have the comment, you will never be able to access the variables, the event has not occurred yet.

Instead, what you can do is pass an anonymous function to the event handler, call your method which returns a value and use it as appropriate

function init()
{
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", function(event){
        var result = getPosition(event);

        // result is your return value
    }, false);

}

Answer 2

You can't.

JavaScript isn't capable of time travel.

The event handler function won't run until the event happens. By that time, the function that called addEventHandler will have finished running and returned.

The event handler function needs to either deal with the data itself, or call other functions to do it. The data has to travel forwards, it can't go back.

Answer 3

Another approach is here...

Initalise a variable on top of script code

<script type="text/javascript">
var paramVal1= null;
var paramVal2 = null;
  document.addEventListener("DOMContentLoaded", init, false);

  function init()
  {
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousedown", getPosition, false);

return {x: paramVal1, y: paramVar2};

  }

  function getPosition(event)
  {
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("canvas");

    if (event.x != undefined && event.y != undefined)
    {
      x = event.x;
      y = event.y;
    }
    else
    {
      x = event.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
    }

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;

paramVal1 = x;
paramVal2 = y;

    alert("x: " + x + "  y: " + y); // here can print the correct position

    // if I add the two values here, and return them. How can I receive the values in funciton init()
    // var clickPosition={"x":x, "y":y};
    // return clickPosition;
  }

</script>

Answer 4

Event listeners return nothing by default, but you can get data out of them in clever ways.

This MDN article described 3 methods:

0. Getting data into an event listener using "this"
1. Getting data into an event listener using the outer scope property
2. Getting data into and out of an event listener using objects