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.