关于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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JavaScript函数柯里化实现原理及过程
Dec 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 翻页 实例代码
2009/08/07 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
vue 设置路由的登录权限的方法
2018/07/03 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python实现句子翻译功能
2017/11/14 Python
如何通过Python实现标签云算法
2019/07/02 Python
基于Python函数和变量名解析
2019/07/19 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
接口可以包含哪些成员
2012/09/30 面试题
护士辞职信模板
2014/01/20 职场文书
回门宴父母答谢词
2014/01/26 职场文书
小学语文国培感言
2014/03/04 职场文书
员工保密协议书
2014/09/27 职场文书
机关保密工作承诺书
2015/05/04 职场文书
就业证明函
2015/06/17 职场文书
大学军训口号大全
2015/12/24 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python