Question

我有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;

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

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');

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

Answer 1

function filterByClass(className)
{

    return function()
    {
        // Do something with className
        console.log(className);
    }
}

Answer 2

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

更新

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

Answer 3

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

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

<!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访问该元素，因此将id与this.id

一起返回

Javascript：同时分配函数和传递参数

3 个答案:

绑定语法

代码：

更新