Javascript：同时分配一个函数并传递参数
[英]Javascript : Assign a function and pass parameter at the same time
问题描述
I have html buttons "classA","classB" and "classC" to which I assign the onclick handler function as follows.. 
我有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;
These 3 functions do the same thing, only difference being the class. 这三个函数做相同的事情，只是类不同。 So, can I have a single function assigned to these buttons, called with different parameters for each button. 因此，我可以为这些按钮分配一个功能，为每个按钮调用不同的参数吗？ Something like below 像下面这样
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');
I know this is a function call and not assignment and this is wrong but is there a way I can achieve this ie assign a function and pass parameter at the same time but not call it? 我知道这是一个函数调用而不是赋值，这是错误的，但是有什么办法可以实现这一点，即同时赋值一个函数并传递参数但不调用它？
3 个解决方案
解决方案1
6 已采纳 2013-06-07 08:46:18
function filterByClass(className)
{
return function()
{
// Do something with className
console.log(className);
}
}
解决方案2
3
Bind can help you out here: Its called partial application. 绑定可以在这里帮助您：它称为部分应用程序。
Bind Syntax 绑定语法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
- 1st param is scope of the function when it is called. 第一个参数是函数被调用时的范围。
- From 2nd you can pass any number of agruments. 从2日开始，您可以传递任意数量的agruments。 See the below code to know how it works. 请参阅下面的代码以了解其工作原理。
Code: 码：
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);
}
Update: 更新：
Check out the Compatibility section in the above MDN link. 在上面的MDN链接中查看“ Compatibility部分。 You may need to use it, if you are going to use bind in non modern browsers. 如果要在非现代浏览器中使用bind ，则可能需要使用它。
解决方案3
1 2013-06-07 08:57:27
i always try to keep the code as short as possible 我总是试图使代码尽可能短
so if your buttons are inside a container you can do that. 因此，如果您的按钮位于容器内，则可以执行此操作。
<!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>
in this case 在这种情况下
document.getElementsByTagName('div')[0]
returns the first div in the document 返回文档中的第一个div
childNodes
give u the list of the buttons inside that div 给你那个div里面的按钮列表
the while function adds the onclick event with your function 'filterByClass' while函数将onclick事件与函数'filterByClass'添加在一起
inside filterByClass u can access the element by this and so return it's id with this.id 在filterByClass内部，您可以通过this访问元素，因此使用this.id返回其id
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.