关于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 网页水印(非图片水印)实现代码
Mar 01 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JScript中的条件注释详解
Apr 24 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JavaScript 作用域实例分析
Oct 02 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 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实现图片简单上传
2006/10/09 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
google地图的路线实现代码
2009/08/20 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
Promise扫盲贴
2019/06/24 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python中表示字符串的三种方法
2017/09/06 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python常用外部指令执行代码实例
2020/11/05 Python
python中doctest库实例用法
2020/12/31 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
就业自我评价
2014/02/04 职场文书
毕业评语大全
2014/05/04 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS