关于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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
限制只能输入数字的实现代码
May 16 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
vue自定义filters过滤器
Apr 26 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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使用function_exists判断函数可用的方法
2014/11/19 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
JS继承 笔记
2011/07/13 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python的range和linspace使用详解
2019/11/27 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
使用Python实现批量ping操作方法
2020/05/06 Python
如何完美的建立一个python项目
2020/10/09 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
村干部培训班主持词
2014/03/28 职场文书
调研汇报材料范文
2014/08/17 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
python实现剪贴板的操作
2021/07/01 Python