在定义事件时包含参数

Including an argument when defining an event

本文关键字：包含 参数 事件 定义      更新时间：2023-09-26

让我在前面加上一句话，我从不使用匿名函数。直到我停止使用匿名函数，我才理解异步JavaScript。

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

Q： 有没有更直接的方法来写这篇文章，让函数volume用一个参数来调用(而不需要先调用一个函数来调用函数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) {
}

我想做一些类似的事情：

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

而不使用匿名函数。

根据jQuery的文档，我经常使用格式

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

通过这种方式，可以通过事件处理程序函数中的e.data访问参数(可能是0或1，在其他情况下甚至可能是对象或任何您喜欢的对象(。这意味着你可以像一样访问它

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

不过，重要的是，将事件对象e作为参数添加到函数定义中，使其可用于处理程序函数。

您不需要绑定新函数。您可以使用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>

你可以试试这个：

$(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方法的详细说明，请查看此处。

您可以使用data参数
.on(事件[，选择器][，数据]，处理程序(

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

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

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

proxy方法是独立于浏览器的bind方法的替代品，因为一些较旧的浏览器不支持它。

相关文章：