关于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工具 Event封装
Aug 21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python内置模块logging用法实例分析
2018/02/12 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
经济管理专业自荐信
2013/12/30 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
行政助理的岗位职责
2014/02/18 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
在 Python 中利用 Pool 进行多线程
2022/04/24 Python