关于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));