CODEWITHSUNDEEP
javascriptjqueryangularjs
Brk
Brk

Reputation: 1297

How to pass event and other arguments to click handler

Hey I have a build a canvas using easelJS. In my canvas, I have points which a click handler is define for them using the following syntax:

p.on("click", handleMouseClickEvent);

Now I want to pass arguments to the handler handleMouseClickEvent , I know that I get the event object for free without passing it, but when I try to pass one argument, lets say I write:

  p.on("click", handleMouseClickEvent(arg1));

Then the event object is undefined and not accessible at all. How can I pass the event object and many more arguments using the above syntax.

p.on("click", handleMouseClickEvent(arg1,arg2,...,argN));

Upvotes: 3

Views: 4793

Answers (7)

Lanny
Lanny

Reputation: 11294

Just to throw a more context-specific answer into the mix. I believe this question was asked in reference to this codepen: http://codepen.io/Barak/pen/AXZxKN

From an architecture standpoint, injecting parameters into handlers is a workaround you don't need. Instead, use the event target to access what was clicked/interacted with, and determine the values you need.

For your example, you are looking for the original data properties used to plot the points in your graph. You can either inject those properties onto the display object, inject a reference to the original data object, or create a look-up table to associate the display object with its related data point.

for (...) {
    var point = data[i];
    var dot = new createjs.Shape();
    dot.x = point.x * GRAPH_WIDTH;

    // Inject property or reference 
    dot.point = point;

    // Create lookup
    lookupTable[i] = dot;
}

Then when you click the object, look up the data.

dot.on("click", function(event) {
    var dot = event.target;

    // Use reference
    var point = dot.point;

    // Or use lookup
    var index = lookup.indexOf(dot);

    //...do stuff with it
}

There are lots of other ways to create this relationship, these are just some suggestions. Creating wrapper functions will work, but IMHO it is not a great approach for the long term or for a larger application. You can totally continue to use your approach, as it appears to be working for you -- but I wanted to offer some food for thought.

Cheers.

Upvotes: 1

georgeawg
georgeawg

Reputation: 48968

The arguments can be bound to a handler function with Function.prototype.bind

p.on("click", handleEventWithArg.bind(this,arg1));

function handleEventWithArg(arg1, event) {
    console.log(arg1);
    console.log(event);
});

The .bind method returns a new functon that the browser can invoke with the event object.

Upvotes: 2

Jamie
Jamie

Reputation: 31

You need to define your event handler, try this:

function handleMouseClickEvent(arg1)) {
    return function doSomething(event) {
        //logic here
    }
}

Upvotes: 3

Michał Młoźniak
Michał Młoźniak

Reputation: 5556

This should handle it. You can add more arguments.

(function(arg1, arg2) {
  p.on("click", function(event) { handleMouseClickEvent(event, arg1, arg2) })
})(arg1, arg2);

Upvotes: 1

Jiri
Jiri

Reputation: 435

When using jQuery, Ravi's answer is perhaps the best way. I'll try to provide another perspective to solve your question.

By using

p.on("click", handleMouseClickEvent(arg1));

you're not passing the function as event handler, you're executing it and passing its return value as event handler. That perhaps already pointed you to the answer, right? Try to define your event handler like this:

function handleMouseClickEvent(arg1)) {
    return function reallyHandleMouseClickEvent(event) {
        // all variables available here: arg1, event
    }
}

Of course, you can add as many argN parameters as you want.

Upvotes: 5

Ravi Shankar Bharti
Ravi Shankar Bharti

Reputation: 9268

you can try this:

p.on("click", null, {arg1: "abc", arg2: "xyz"},handleMouseClickEvent);

//And in your function, you can get the event data like this

function handleMouseClickEvent()
{
    alert(event.data.arg1);
    alert(event.data.arg2);
}

According to official documenatation, on takes arguments like this:

.on( events [, selector ] [, data ], handler )

events Type: String

One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

selector Type: String

A selector string to filter the descendants of the selected elements that > > > trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

data Type: Anything

Data to be passed to the handler in event.data when an event is triggered.

handler Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] )

A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

For more information, see JQuery Documentation of on() event Handler

Upvotes: 2

Graham
Graham

Reputation: 6562

Since you're not calling the handler function yourself (the browser is doing it for you), you don't get to specify further arguments to the handler. All you'll get is the event object.

However, because of how JavaScript's variable scoping works, you don't have to. Functions have access to variables outside themselves, so you can simply access variables without passing them in explicitly:

var foo = "bar";

var handleMouseClickEvent = function(e) {
    console.log(e.type); // 'click'
    console.log(foo); // 'bar'
};

p.on("click", handleMouseClickEvent);

Upvotes: 3

Related Questions