关于javaScript注册click事件传递参数的不成功问题
最近这半年作为一个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高级程序设计》,在这本书上找到了解决方案。首先编写一个方法:
functionbindFunction(obj,func){ varargs=[]; for(vari=2;i<arguments.length;i++){ args.push(arguments[i]); } returnfunction(){ func.apply(obj,args); }; };
然后在自己的js库中添加如下两个方法,如有不明白的地方,可以参考《JavaScript.DOM高级程序设计》,其中该书2.3小节有该方法的说明,只是本人加了些许改动:
functionbindFunction(obj,func){ varargs=[]; for(vari=2;i<arguments.length;i++){ args.push(arguments[i]); } returnfunction(){ func.apply(obj,args); }; }; window["OYF_MARK"]["bindFunction"]=bindFunction; functionaddEvent(node,type,listener){ //使用前面的方法检查兼容性以保证平稳退化 if(!isCompatible()){ returnfalse } if(!(node=$(node))) returnfalse; if(node.addEventListener){ //W3C的方法(冒泡事件,如果将false改为true,则为捕获事件) node.addEventListener(type,listener,false); returntrue; } 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]); returntrue; } //若两种方法都不具备则返回false returnfalse; }; window["OYF_MARK"]["addEvent"]=addEvent;
以上两个函数为本人根据《JavaScript.DOM高级程序设计》中源代码稍作修改,添加到自己的的一个js库中,以便复用。接下来就可以使用如下方式给元素注册事件并向事件处理函数传递参数了:
//注册新的onclick事件处理函数 OYF_MARK.addEvent(e,"click",OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));
相关文章
- JavaScript笔记(16)之事件高级
- 【学习笔记】JavaScript
- JavaScript 在一个区间里求素数
- JavaScript事件流
- JavaScript中的事件教程
- Javascript优化技巧(文件瘦身篇)
- javascript连连看代码出炉
- JavaScript事件对象的实现
- Javascript学习笔记错误处理
- javascript按回车键相应按钮提交事件
- JavaScript中也使用$美元符号来代替document.getElementById
- Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
- JavaScript注册事件代码
- javascript事件处理程序介绍
- javascript定时变换图片实例代码
- javascript按键事件(兼容各浏览器)
- javascript计时器事件使用详解
- JavaScript排序算法之希尔排序的2个实例
- JavaScript函数获取事件源的小例子
- Javascript封装DOMContentLoaded事件实例
- 在JavaScript里防止事件函数高频触发和高频调用的方法