关于javaScript注册事件传递参数的浅析
最近这半年作为一个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与JQuery点击事件传递参数
我们知道JS(javascript)是一种脚本语言,用于客户端web开发,常用来给html网页添加动态功能,是客户端运行的解释性语言. JQuery是对js的封装,简化了ajax和html的一款js框 ...
- linux的 定时器传参数,JavaScript 定时器调用传递参数的方法
JavaScript定时器调用传递参数的方法,需要的朋友可以参考下. 无论是window.setTimeout 还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许 ...
- 微信小程序学习5:小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数 前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
- Knockout 事件传递参数的方法
在Knockout中直接使用函数传递参数是不行的,会导致函数在初始化时就被调用,例如: <span style="font-size:14px;"><div da ...
- Antd-Design List渲染列中Button 点击事件 传递参数
背景:使用List 渲染的后台数据列表中,点击删除按钮,可以将该项对应的主键传递给函数 点击删除的时候,将该条商品记录对应的id 传递给函数,通过调用后台接口删除 可以看到的是关键代码: onCli ...
- C# 委托事件传递参数
关于委托传值的总结,每天总结一点点,每天进步一点点 这里尝试了串口通讯委托,虽然本来就有,但是自己练习一下还是好的. //定义一个委托public delegate void serialPortHa ...
- 利用闭包实现onclick事件传递参数
当触发点击事件,一个简单的例子. <!DOCTYPE html> <html> <head><title>闭包创建数组</title>< ...
- html点击事件传参 php,HTML通过事件传递参数到js详解及实例
目标处理函数为selectAttr(test) 1.直接传递给定参数如:οnclick="selectAttr('1'); οnclick="selectAttr('a'); 2. ...
- swift3 按钮触发事件_swift5.3 UIView 与 UIButton 点击事件传递参数
UIView 与 UIbutton 点击事件的参数传递:目前我通过 tag 解决了 UIButton 的点击参数传递 设置 UIButton 的 tag,详细见代码let playButton = U ...
最新文章
- [C] 图的广度优先搜索——最少转机
- pytest文档21-pytest-html报告优化(nodeid中文显示[\u6350\u52a9\u6211\u4eec]问题解决)
- 西数举债千亿收购闪迪 到底图了个啥?
- Vue-CLI——自定义title解决方案
- 用Helper对类的行为进行修饰以便复用(附:外三篇)
- Php二叉树对称,PHP如何实现判断二叉树是否对称
- 化繁为简|华天软件参数化,将轴承设计变为数与数的组合
- 均值滤波器类型_[数字图像处理]图像去噪初步(1)--均值滤波器
- iOS 出现:不受信任的开发者 弹框
- 计算机重新启动操作处于挂起状态,win7系统安装Photoshop提示安装程序检测到计算机重新启动操作可能处于挂起状挂起状态的解决方法...
- Android使用FFmpeg 解码H264并播放(二)
- 跟青翼一起学Qt4编程大纲目录
- 肠道菌群失调与炎症性肠病的关联
- php ean13,php生成EAN
- 编码实现字符串类CNString实现运算符重载
- c语言——简单计算器
- Teradata使用笔记(2)--数据库操作
- 永中科技破产清算的疑问(二)
- mysql is双竖线_MySQL 5.0 新特性教程 存储过程:第二讲
- NavigationView使用详解
热门文章
- liteide无法自动补全代码问题解决【go: cannot find GOROOT directory: c:\go】
- MFC- OnIdle空闲处理
- Centos6.7系统环境下使用 yum install 安装mysql-community-5.7.22(史上最简)
- 滴水穿石-07Java开发中常见的错误
- 使用 Skeleton Screen 提升用户感知体验
- 物联网操作系统Hello China V1.76(PC串口版)版本发布
- [转]那些相见恨晚的 JavaScript 技巧
- C#将图片白色背景设置为透明
- Composite UI Application Block学习笔记之Event Broker
- adcetris研发历程_AZ、MSD、吉利德争相布局ADC药物