Question

让我在前面加上说明我从不使用匿名函数。在我停止使用匿名函数之前，我不理解异步JavaScript。

话虽如此（不要在答案中使用匿名函数）：

问：是否有更直接的方法来编写这样的函数，使用参数调用函数卷（不先调用函数来调用函数卷）？

$(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) {
}

我想做点什么：

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

不使用匿名函数。

Answer 1

根据jQuery's documentation，我经常使用表格

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

此方式，参数（可能它是0或1，或者在其它情况下，它甚至可以是对象或任何你喜欢）是通过在事件处理函数e.data访问。这意味着您可以像

一样访问它

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

尽管您将事件对象 e 提供给处理程序函数并将其作为参数添加到函数定义中，但这很重要。

Answer 2

你可以尝试这个：

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

上面我们使用bind方法，它允许我们调用一个提供其上下文的函数，this的值（在这种情况下无关紧要，因此我们传递null）并传递其参数的值。

另一种方法是使用apply或call方法。

有关bind方法的详细说明，请查看here。

Answer 3

您可以使用proxy method指定函数的上下文和参数：

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

proxy方法是bind method的浏览器独立替代方法，因为某些旧版浏览器不支持此方法。

Answer 4

您无需绑定新功能。您可以使用jQuery的事件数据重用相同的函数。

$(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>

Answer 5

您可以使用data参数
.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);
}

在定义事件时包含参数

5 个答案: