1

我有 html 按钮“classA”、“classB”和“classC”，我为其分配了 onclick 处理程序函数，如下所示..

var classA = document.getElementById('classA');
classA.onclick = filterByClassA;

var classB = document.getElementById('classB');
classB.onclick = filterByClassB;

var classC = document.getElementById('classC');
classC.onclick = filterByClassC;

这 3 个函数做同样的事情，唯一的区别是类。那么，我可以为这些按钮分配一个功能，为每个按钮使用不同的参数调用。像下面的东西

var classA = document.getElementById('classA');
classA.onclick = filterByClass('classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass('classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass('classC');

我知道这是一个函数调用而不是赋值，这是错误的，但有没有办法可以实现这一点，即同时赋值一个函数并传递参数但不调用它？

4

3 回答 3

6 
function filterByClass(className)
{

    return function()
    {
        // Do something with className
        console.log(className);
    }
}
于 2013-06-07T08:46:18.480 回答
3

Bind可以在这里帮助您：它称为部分应用程序。

绑定语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

  • 第一个参数是函数被调用时的范围。
  • 从第 2 次开始，您可以通过任意数量的 agruments。请参阅下面的代码以了解它是如何工作的。

代码：

var classA = document.getElementById('classA');
classA.onclick = filterByClass.bind(classA, 'classA');

var classB = document.getElementById('classB');
classB.onclick = filterByClass.bind(classB, 'classB');

var classC = document.getElementById('classC');
classC.onclick = filterByClass.bind(classC, 'classC');

function filterByClass(className, eventObject) {
  console.log(this, className, eventObject);
}

更新：

查看Compatibility上面 MDN 链接中的部分。如果您要bind在非现代浏览器中使用，您可能需要使用它。

于 2013-06-07T08:51:29.083 回答
1

我总是尽量保持代码尽可能短

因此，如果您的按钮位于容器内，则可以这样做。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>atest</title>
<script>
window.onload=function(){
 var c=document.getElementsByTagName('div')[0].childNodes,
 l=c.length,
 filterByClass=function(){
  console.log(this.id);//this.id is the classA or whatever
 };
 while(l--){
  c[l].onclick=filterByClass;
 }
}
</script>
</head>
<body>
<div>
 <button id="classA">A</button>
 <button id="classB">B</button>
 <button id="classC">C</button>
</div>
</body>
</html>

在这种情况下

document.getElementsByTagName('div')[0]

返回文档中的第一个 div

childNodes

给你那个div里面的按钮列表

while 函数使用您的函数“filterByClass”添加 onclick 事件

在 filterByClass 里面你可以访问元素并this返回它idthis.id

于 2013-06-07T08:57:27.173 回答