How to Pass Arguments to Event Handlers in Jquery

How can I pass arguments to event handlers in jQuery?

The simplest way is to do it like so (assuming you don't want any of the event information passed to the function)...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle.

This create an anonymous function, which is called when the click event is triggered. This will in turn call myfunction() with the arguments you provide.

If you want to keep the ThisBinding (the value of this when the function is invoked, set to the element which triggered the event), then call the function with call().

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle.

You can't pass the reference directly in the way your example states, or its single argument will be the jQuery event object.

If you do want to pass the reference, you must leverage jQuery's proxy() function (which is a cross browser wrapper for Function.prototype.bind()). This lets you pass arguments, which are bound before the event argument.

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle.

In this example, myfunction() would be executed with its ThisBinding intact (null is not an object, so the normal this value of the element which triggered the event is used), along with the arguments (in order) arg1, arg2 and finally the jQuery event object, which you can ignore if it's not required (don't even name it in the function's arguments).

You could also use use the jQuery event object's data to pass data, but this would require modifying myfunction() to access it via event.data.arg1 (which aren't function arguments like your question mentions), or at least introducing a manual proxy function like the former example or a generated one using the latter example.

jQuery .on() method - passing argument to event handler function

The .on() function expects a function reference to be passed; what you're doing is calling the function and passing its return value. If you need to pass a parameter you'll need to wrap the call in an anonymous function.

$(document).on('dblclick', '#an_tnam tr', function(event) {
    ADS('hello');
});

jQuery always passes its normalized event object as the first argument to the function to be executed.

Passing parameters to event handler in jquery

Not sure of your function's signature, but you can pass parameters to the function itself just like you do to any normal function, so it would look something like this:

$(options.host_element).find('select').on('change',function(){
    graph_widget.draw_graph(options);
});

Bind is used to change the value of this that will be used in the function, not quite what you're looking for.

I made a small fiddle to demonstrate:

Fiddle

Pass a parameter to a event handler in jQuery

Say you want to pass data object,

var data = {i: 2};
$(id).change(data, myHandler);

In the myHandler function:

function myHandler(event) {
    var i = event.data.i; // <= your data
}

The value passes as parameter if modified later wont get reflected.

Passing a parameter into an event handler

You must pass a function or a function reference to an event binding expression so if you need to pass arguments, you can wrap the actual function call (with parameters) in an anonymous function and pass that to the event binding expression.

let bank = {  deposit:50};
$('#checkingDeposit').on('click', function(event) {  deposit(event, {amount:100, account:'savings'}, bank.deposit)});        function deposit(event, obj, account){  console.log('deposit running');  console.log(obj.account);    //output 'savings'  console.log(obj.amount); //output 100}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button" id="checkingDeposit">Deposit</button>

How to pass event and other arguments to click handler

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.

jQuery's .click - pass parameters to user function

For thoroughness, I came across another solution which was part of the functionality introduced in version 1.4.3 of the jQuery click event handler.

It allows you to pass a data map to the event object that automatically gets fed back to the event handler function by jQuery as the first parameter. The data map would be handed to the .click() function as the first parameter, followed by the event handler function.

Here's some code to illustrate what I mean:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

---

Related Topics