关于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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Vuex提升学习篇
Jan 11 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
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+javascript模拟Matrix画面
2006/10/09 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
浅谈php冒泡排序
2014/12/30 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
js获取ip和地区
2017/03/10 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
对Python3 序列解包详解
2019/02/16 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python实现文字版扫雷
2020/04/24 Python
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
市场营销专业推荐信
2013/11/03 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
档案接收函
2014/01/13 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS