关于javaScript注册click事件传递参数的不成功问题


Posted in Javascript onJuly 18, 2014

最近这半年作为一个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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 #Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 #Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 #Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
You might like
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
python获得图片base64编码示例
2014/01/16 Python
python抓取百度首页的方法
2015/05/19 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Python判断有效的数独算法示例
2019/02/23 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python实现猜拳游戏项目
2020/11/30 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
Java的基础面试题附答案
2016/01/10 面试题
会计专业大学生求职信范文
2014/01/28 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
三年级小学生评语
2014/04/22 职场文书
食品安全工作方案
2014/05/07 职场文书
初中学校对照检查材料
2014/08/19 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
判断Python中的Nonetype类型
2021/05/25 Python