关于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 21 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
实例详解Node.js 函数
Jun 10 Javascript
Angularjs实现数组随机排序的方法
Oct 02 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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
单位人事专员介绍信
2014/01/11 职场文书
超市端午节活动方案
2014/01/23 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
爱牙日活动总结
2014/08/29 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL