关于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 01 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
Angular 数据请求的实现方法
May 07 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
详解jQuery中的easyui
Sep 02 jQuery
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
Vue3 Composition API的使用简介
Mar 29 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
php时间函数用法分析
2016/05/28 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Python秒算24点实现及原理详解
2019/07/29 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
八年级历史教学反思
2014/01/10 职场文书
捐款倡议书范文
2014/02/02 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
网络管理专业求职信
2014/03/15 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
个人求职意向书
2015/05/11 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Mysql binlog日志文件过大的解决
2021/10/05 MySQL