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

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

javascript

Javascript：同时分配函数和传递参数,javascript,Javascript,我有html按钮“classA”、“classB”和“classC”，我将onclick处理程序函数分配给它们，如下所示 var classA = document.getElementById('classA'); classA.onclick = filterByClassA; var classB = document.getElementById('classB'); classB.onclick = filterByClassB; var classC = document.get

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

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

可以帮助您：它被称为部分应用程序

function filterByClass(className)
{

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

绑定语法

fun.bind（thisArg[，arg1[，arg2[，…]）

第一个参数是调用函数时的作用域
从第二名开始，你可以通过任意数量的耕地。请参阅下面的代码以了解其工作原理

代码：更新：查看上述MDN链接中的

兼容性

部分。如果要在非现代浏览器中使用

bind

，可能需要使用它

可以帮助您：它被称为部分应用程序

绑定语法

fun.bind（thisArg[，arg1[，arg2[，…]）

第一个参数是调用函数时的作用域
从第二名开始，你可以通过任意数量的耕地。请参阅下面的代码以了解其工作原理

代码：更新：

查看上述MDN链接中的

兼容性

部分。如果要在非现代浏览器中使用

bind

，可能需要使用它

我总是尽量使代码尽可能简短

所以，如果你的按钮在一个容器里，你可以这样做

<!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>

返回文档中的第一个div

childNodes

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

while函数将onclick事件与函数“filterByClass”一起添加

内部过滤器类u可以通过

this

访问元素，因此使用

this.id

返回元素的

id

，

我总是尽量保持代码尽可能短
所以，如果你的按钮在一个容器里，你可以这样做
<!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>

返回文档中的第一个div
childNodes 

给你那个div里面的按钮列表
while函数将onclick事件与函数“filterByClass”一起添加
在filterByClass中，u可以通过this
访问元素，因此使用this.id
返回元素的id
，
我不确定是否有向下投票，但是返回函数（事件）{console.log（className）；}
对op有用。我建议重命名外部函数。然而，基本的想法是正确的。@Jan Dvorak，我按照海报上的命名。“filterByClass（'classC'）；”@Tamil Vendham，它确实会：）我不确定下一票，但是返回函数（event）{console.log（className）；}
对op有用。我建议重命名外部函数。然而，基本的想法是正确的。@Jan Dvorak，我按照海报上的命名。“filterByClass（'classC'）；“@Tamil Vendham，它确实会：）“我总是尽量让代码尽可能短”——cocco。为什么？这是开发代码，您只是让您自己和其他人更难阅读和理解。代码通过缩微器时将被缩短/压缩。（生产前）我的意思是：如果你写5次getelementbyid。。。此外，压缩器将写入5次getelementbyid。。。他不知道他可以在缓存parentnode时用一个超高速循环来替换它。它还保留了你手动创建的所有无用变量。如果你可以直接访问它，为什么要将一个变量传递给函数？这个脚本还破坏了每个循环引用，因此不会创建任何类型的memoryleak。我特别评论了你的“我总是尽量使代码尽可能短”，这就是我引用它的原因。“我总是尽量使代码尽可能短”-cocco。为什么？这是开发代码，您只是让您自己和其他人更难阅读和理解。代码通过缩微器时将被缩短/压缩。（生产前）我的意思是：如果你写5次getelementbyid。。。此外，压缩器将写入5次getelementbyid。。。他不知道他可以在缓存parentnode时用一个超高速循环来替换它。它还保留了你手动创建的所有无用变量。如果你可以直接访问它，为什么要将一个变量传递给函数？这个脚本还破坏了每个循环引用，因此不会创建任何类型的memoryleak。我特别评论了你的“我总是尽量让代码尽量简短”，这就是我引用它的原因。@Tamil Vendhan也会尝试这种方法。@Tamil Vendhan也会尝试这种方法。