Javascript：同时分配一个函数并传递参数
[英]Javascript : Assign a function and pass parameter at the same time
问题描述
我有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');
我知道这是一个函数调用而不是赋值，这是错误的，但是有什么办法可以实现这一点，即同时赋值一个函数并传递参数但不调用它？
3 个解决方案
解决方案1
6 已采纳 2013-06-07 08:46:18
function filterByClass(className)
{
return function()
{
// Do something with className
console.log(className);
}
}
解决方案2
3
绑定可以在这里帮助您：它称为部分应用程序。
绑定语法
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 ，则可能需要使用它。
解决方案3
1 2013-06-07 08:57:27
我总是试图使代码尽可能短
因此，如果您的按钮位于容器内，则可以执行此操作。
<!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函数将onclick事件与函数'filterByClass'添加在一起
在filterByClass内部，您可以通过this访问元素，因此使用this.id返回其id
将函数赋值给变量并传递参数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.