關於javaScript註冊click事件傳遞參數的不成功問題

在javaScript中為一個html元素註冊click事件處理函數時，例如給該處理函數傳3個參數。可不管是使用下面那種方式都不能給事件處理函數傳遞參數

最近這半年作為一個java 程式設計師，我寫的javaScript程式碼都快比java程式碼多了，前段時間是給某銀行做一個櫃員管控系統，在櫃員授權這一塊功能上，由於櫃員的授權需要考慮各方面的因素，比如機構權限、櫃員類型權限、崗位權限，業務權限等等，並且要對這些權限要做多次的交集或者併集處理，頁面上不得不用許多的javascript來控制。造成了這功能模組的實作上javaScript程式碼比java程式碼負責的情況。

而現在又要給某銀行開發一個保管箱管理系統，其核心功能塊保管箱座管理以及保管箱管理，為實現管理功能上類似與C/S架構那樣直觀、方便，並將處理結果實時的顯示給操作人員，經過幾日思考與實驗，最後使用CSS+javaScript+java來進行開發，用java來處理業務邏輯，用CSS用來表現目標對象的各種狀態，用javaScript來根據目標對象的狀態轉變，來實現其CSS的切換。

在這其中遇到了一個難題，就是在javaScript中給一個html元素註冊click事件處理函數時，例如給該處理函數傳3個參數。可是不管是使用下面那種方式（node表示要註冊事件的節點,fun為事件處理函數）都不能給事件處理函數傳遞參數：

node.addEventListener('click', fun, false); 
node.attachevent('onclick', fun);
Node['onclick']=fun

顯然以方式都不行，注意一下寫法都是不正確的：

node.addEventListener('click', fun(arg1,arg2,arg3), false); 
node.attachevent('onclick', fun(arg1,arg2,arg3)); 
Node['onclick']=fun(arg1,arg2,arg3)

好在讀過一本書《JavaScript.DOM高級程式設計》，在這本書上找到了解決方案。首先寫一個方法：

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) { 
args.push(arguments[i]);
} 
return function(){ 
func.apply(obj, args);
}; 
};

然後在自己的js庫中加入以下兩個方法，如有不明白的地方，可以參考《JavaScript.DOM高級程式設計》，其中該書2.3小節有該方法的說明，只是本人加了些許改動：

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function(){
func.apply(obj, args);
};
}; 
window[&#39;OYF_MARK&#39;][&#39;bindFunction&#39;] = bindFunction; 
function addEvent(node, type, listener){
//使用前面的方法检查兼容性以保证平稳退化
if (!isCompatible()) {
return false
} 
if (!(node = $(node))) 
return false;
if (node.addEventListener) { 
//W3C的方法(冒泡事件，如果将false改为true，则为捕获事件） 
node.addEventListener(type, listener, false); 
return true;
}
else
if (node.attachEvent) { 
//MSIE的方法 
node[&#39;e&#39; + type + listener] = listener;
node[type + listener] = function(){
node[&#39;e&#39; + type + listener](window.event);
} 
node.attachEvent(&#39;on&#39; + type, node[type + listener]); 
return true; 
}
//若两种方法都不具备则返回false 
return false;
};
window[&#39;OYF_MARK&#39;][&#39;addEvent&#39;] = addEvent;

以上兩個函數為本人根據《JavaScript.DOM高級程式設計》中原始程式碼稍作修改，添加到自己的一個js庫中，以便復用。接下來就可以使用以下方式給元素註冊事件並向事件處理函數傳遞參數了：

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));

更多關於javaScript註冊click事件傳遞參數的不成功問題相關文章請關注PHP中文網！