javascript - 使用 jQuery 将属性设置为函数值的惯用方法

Question

为了有希望地阻止“主要基于意见”的关闭按钮点击器，我不是在寻找关于“最佳”方法的意见；我只是想知道是否有我缺少的更直接的解决方案。

我的目标是将相同的 onclick 方法添加到我页面上的所有(数百个)复选框。我对 jQuery 解决方案的第一次尝试是这样的:

$('input[type="checkbox"]').prop('onclick', function(){alert("Boop!");})

但这会遇到 $.prop() 的计算值行为并立即为每个复选框调用该函数。

所以我可以这样做:

$('input[type="checkbox"]').prop('onclick', function(){return function() {alert("Boop!");}})

但这感觉非常糟糕。或者，我可以这样做:

$('input[type="checkbox"]').each(function(_, cb) {
  cb.onclick = function(){alert("Boop!");};  
});

但这对于 jQuery 来说似乎是一反常态的手动方式。

那么我是否缺少更直接的解决方案？

Answer 1

声明函数，然后简单地通过名称引用它:

function handler() { alert("Boop!"); }

$("input[type='checkbox']").on("click", handler);

请注意，您不应通过设置“onfoo”属性来设置事件处理程序。

编辑 — 如果您想避免一遍又一遍地添加处理程序，请使用委托(delegate):

$("body").on("click", "input:checkbox", handler);

那只创建一个事件处理程序注册。当“点击”事件从 DOM 冒泡到主体时，jQuery 将检查哪些目标元素与选择器匹配，并为匹配的元素调用您的处理程序。 (意见 — 我主要采用的做法是完全对所有事件使用主体级委派。它使事情变得不那么困惑。)