关于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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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 ftp文件上传函数(基础版)
2010/06/03 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php生成QRcode实例
2014/09/22 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python自动识别文本编码格式代码
2019/12/26 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python如何求100以内的素数
2020/05/27 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
副处级干部考察材料
2014/05/17 职场文书
经济管理专业求职信
2014/06/09 职场文书
2015年宣传工作总结
2015/04/08 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
跑吧孩子观后感
2015/06/10 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS