關(guān)于javaScript注冊(cè)click事件傳遞參數(shù)的不成功問題
最近這半年作為一個(gè)java 程序員，我寫的javaScript代碼都快比java代碼多了，前段時(shí)間是給某銀行做一個(gè)柜員管控系統(tǒng)，在柜員授權(quán)這一塊功能上，由于柜員的授權(quán)需要考慮各方面的因素，比如機(jī)構(gòu)權(quán)限、柜員類型權(quán)限、崗位權(quán)限，業(yè)務(wù)權(quán)限等等，并且要對(duì)這些權(quán)限要做多次的交集或者并集處理，頁面上不得不用許多的javascript來進(jìn)行控制。造成了這一功能模塊的實(shí)現(xiàn)上javaScript代碼比java代碼負(fù)責(zé)的情況。
而現(xiàn)在又要給某銀行開發(fā)一個(gè)保管箱管理系統(tǒng)，其核心功能塊保管箱座管理以及保管箱管理，為實(shí)現(xiàn)管理功能上類似與C/S架構(gòu)那樣直觀、方便，并將處理結(jié)果實(shí)時(shí)的顯示給操作人員，經(jīng)過幾日思考與實(shí)驗(yàn)，最終使用CSS+javaScript+java來進(jìn)行開發(fā)，用java來處理業(yè)務(wù)邏輯，用CSS用來表現(xiàn)目標(biāo)對(duì)象的各種狀態(tài)，用javaScript來根據(jù)目標(biāo)對(duì)象的狀態(tài)轉(zhuǎn)變，來實(shí)現(xiàn)其CSS的切換。
在這其中遇到了一個(gè)難題，就是在javaScript中給一個(gè)html元素注冊(cè)click事件處理函數(shù)時(shí)，比如給該處理函數(shù)傳3個(gè)參數(shù)。可是不管是使用下面那種方式（node表示要注冊(cè)事件的節(jié)點(diǎn),fun為事件處理函數(shù)）都不能給事件處理函數(shù)傳遞參數(shù)：
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高級(jí)程序設(shè)計(jì)》，在這本書上找到了解決方案。首先編寫一個(gè)方法：
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庫中添加如下兩個(gè)方法，如有不明白的地方，可以參考《JavaScript.DOM高級(jí)程序設(shè)計(jì)》，其中該書2.3小節(jié)有該方法的說明，只是本人加了些許改動(dòng)：
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){
//使用前面的方法檢查兼容性以保證平穩(wěn)退化
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;
以上兩個(gè)函數(shù)為本人根據(jù)《JavaScript.DOM高級(jí)程序設(shè)計(jì)》中源代碼稍作修改，添加到自己的的一個(gè)js庫中，以便復(fù)用。接下來就可以使用如下方式給元素注冊(cè)事件并向事件處理函數(shù)傳遞參數(shù)了：
//注冊(cè)新的onclick事件處理函數(shù) OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
相關(guān)文章
在JS中，對(duì)于對(duì)象類型的變量的引用是通過類似C之類的“指針”的方式來操作的，及如果多個(gè)變量引用同一個(gè)對(duì)象，則任意一個(gè)變量對(duì)對(duì)象的操作都會(huì)影響到其它的變量。2010-03-03
瀏覽器JavaScript調(diào)試功能無法使用解決方案
這篇文章主要介紹了瀏覽器JavaScript調(diào)試功能無法使用解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法
下面小編就為大家?guī)硪黄猨s的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
同C# 、Java一樣我們可以手工調(diào)用垃圾回收程序，但是由于其消耗大量資源，而且我們手工調(diào)用的不會(huì)比瀏覽器判斷的準(zhǔn)確，所以不推薦手工調(diào)用垃圾回收2013-10-10
下面小編就為大家?guī)硪黄猣orm表單轉(zhuǎn)Json提交的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航效果實(shí)例源碼
這篇文章主要給大家介紹了利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航的效果，實(shí)現(xiàn)后的效果非常不錯(cuò)，文中給出了簡單的介紹和完整的實(shí)例代碼，對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。2017-01-01
概述BootStrap中role="form"及role作用角色
JS apply用法總結(jié)和使用場景實(shí)例分析