关于javaScript注册事件传递参数的浅析
最近這半年作為一個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['OYF_MARK']['bindFunction'] = 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['e' + type + listener] = listener;
?
node[type + listener] = function(){
?
node['e' + type + listener](window.event);
?
}
?
node.attachEvent('on' + type, node[type + listener]);
?
return true;
?
}
?
//若兩種方法都不具備則返回false
?
return false;
?
};
?
window['OYF_MARK']['addEvent'] = addEvent;
?
以上兩個函數為本人根據《JavaScript.DOM高級程序設計》中源代碼稍作修改，添加到自己的的一個js庫中，以便復用。接下來就可以使用如下方式給元素注冊事件并向事件處理函數傳遞參數了：
?
//注冊新的onclick事件處理函數
?
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的关于javaScript注册事件传递参数的浅析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MONGOOSE – 让NODE.JS高
- 下一篇： 文件上传之Apache commons