关于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获取父节点方法
Aug 20 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
js中this的用法实例分析
Jan 10 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 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
xajax写的留言本
2006/11/25 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python Sleep休眠函数使用简单实例
2015/02/02 Python
一份python入门应该看的学习资料
2018/04/11 Python
python+django+rest框架配置创建方法
2019/08/31 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python基于execjs运行js过程解析
2020/11/27 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
python 图像增强算法实现详解
2021/01/24 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
学生个人的自我评价分享
2013/11/05 职场文书
简历的自荐信
2013/12/19 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
擅自离岗检讨书
2014/02/11 职场文书
舞蹈专业求职信
2014/06/13 职场文书
党员演讲稿
2014/09/04 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年村官工作总结
2014/11/24 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
检讨书范文2000字
2015/01/28 职场文书
创业计划书之甜品店
2019/09/18 职场文书
python 提取html文本的方法
2021/05/20 Python