关于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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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中操作Excel实例代码
2010/04/29 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
交通安全演讲稿
2014/01/07 职场文书
函授生自我鉴定
2014/03/25 职场文书
高中班主任评语
2014/12/30 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Python编程super应用场景及示例解析
2021/10/05 Python