CODEWITHSUNDEEP
javascript
Phillip Senn
Phillip Senn

Reputation: 47595

Including an argument when defining an event

Let me prefix this with saying that I never use anonymous functions. I didn't understand asynchronous JavaScript until I stopped using anonymous functions.

With that being said (do not use anonymous functions in the answer):

Q: Is there a more direct way to write this such that function volume gets called with an argument (without first calling a function to call function volume)?

$(document).on('click','.glyphicon-volume-up',volumeOff)
$(document).on('click','.glyphicon-volume-off',volumeUp)
function volumeOff() {
    volume(0)
}
function volumeUp() {
    volume(1)
}

function volume(arg) {
}

I'd like to do something like:

$(document).on('click','.glyphicon-volume-up',volume(0))
$(document).on('click','.glyphicon-volume-off',volume(1))

without using anonymous functions.

Upvotes: 2

Views: 45

Answers (5)

SaSchu
SaSchu

Reputation: 513

According to jQuery's documentation I often use the form

$(document).on('click', '.glyphicon-volume-up', 0, volume);

This way the parameter (may it be 0 or 1, or in other cases it may even be an object or whatever you like) is accessible via e.data in the event handler function. It means you can access it like

function volume(e) {
    var vol = e.data;
}

It's important though that you make the event object e available to your handler function with adding it to you function definition as a parameter.

Upvotes: 2

user1106925
user1106925

Reputation:

You don't need to bind a new function. You can reuse the same function with use jQuery's event data.

$(document).on('click','.off', 0, volume)
$(document).on('click','.up', 1, volume)

function volume(event) {
    alert(event.data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class=up>UP</button>
<button class=off>OFF</button>

Upvotes: 1

Guffa
Guffa

Reputation: 700302

You can use the proxy method to specify the context and parameters for a function:

$(document).on('click','.glyphicon-volume-up', $.proxy(volume, this, 0));
$(document).on('click','.glyphicon-volume-off', $.proxy(volume, this, 1));

The proxy method is a browser independent replacement for the bind method, as that is not supported by some older browsers.

Upvotes: 1

Andreas
Andreas

Reputation: 21881

You can use the data parameter
.on( events [, selector ] [, data ], handler )

$(document).on('click','.glyphicon-volume-up', {value: 0}, volumeOff);
$(document).on('click','.glyphicon-volume-off', {value: 1}, volumeUp);

function volumeOff(e) {
    volume(e.data.value);
}
function volumeUp(e) {
    volume(e.data.value);
}

Upvotes: 1

Christos
Christos

Reputation: 53958

You could try this one:

$(document).on('click','.glyphicon-volume-up',volume.bind(null, 0));
$(document).on('click','.glyphicon-volume-off',volume.bind(null, 1));

Above we make use of the bind method, which allow us to call a function providing its context, the value of this (which in this case doesn't matter, hence we pass null) and to pass the values for it's arguments.

Another alternative, it would be to make use of the apply or the call methods.

For a detailed explanation about the bind method, please have a look here.

Upvotes: 1

Related Questions