Javascript callbacks/events

Question

bunny.mousedown = function(mouseData){
    text.setText(mouseData.global.x);
}

The 'setText' part gets called when someone presses on the bunny sprite. I'm using PIXIjs.

Hello, I'm new to JS and having a bit of a hard time understanding this code. As I understand, everything in JS is an object, including functions. In other languages that I've had experience with, you'd just use event listeners with this kind of thing.

Mousedown is a callback function, or so it says in the documentation. I think I understand what's a callback function. But, I'm confused at how it's implemented in the code above.

function display(s , callb){
    alert(s); 
    callb(1 , 2);
}

function add(q, r){
   alert((q + r).toString());
}

display("amidoindisrite?", add);

callb would be the callback function, I think... But, anyway, I don't understand how the code on the very top gets executed/called. Anyone have any ideas? What would be the equivalent in Java or Python if there is one? Thanks.

Answer 1

In your second example, callb is a pointer to a function, or the function definition if you like. If you apply the parentheses after it, it executes the function with the parameters provided (if any, integers 1 and 2 in this case). Other ways to execute a callback are the call() and apply() methods.

In the first example, the mousedown property expects a value that is a callback, ie the function definition. This example defines a function that assigned to this mousedown property. When the mousedown event is triggered for the bunny object, the mousedown property is executed (using parentheses, call() or apply() , that would depend upon the Pixjs library). That property being the function defined, the text.setText method is run.

I hope that clarifies it.