关于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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
JavaScript中的类型检查
Feb 03 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
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Django数据统计功能count()的使用
2020/11/30 Python
Python截图并保存的具体实例
2021/01/14 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
会议欢迎词范文
2015/01/27 职场文书
展览会邀请函
2015/02/02 职场文书
项目建议书
2015/02/04 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android