JavaScript 事件属性绑定带参数的函数


Posted in Javascript onMarch 13, 2009

例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数。参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示:

function Handler() { }; 
Handler.prototype = { 
/* 
* 把eventType类型的事件绑定到element元素,并使用handler事件句柄进行处理 
* 兼容 IE 及 Firefox 等浏览器 
* 
* @param element 在其上注册事件的对象(Object) 
* @param eventType 注册的事件类型(String),不加“on” 
* @param handler 事件句柄(Function) 
*/ 
registerEvent : function(element, eventType, handler) { 
if(element.attachEvent) { //2级DOM的事件处理 
element.attachEvent('on'+ eventType, handler); 
}else if (element.addEventListener) { 
element.addEventListener(eventType, handler, false); 
} else { //0级DOM的事件处理 
element['on'+ eventType] = handler; 
} 
}, 
/* 
* 获得带参数的事件句柄的引用 
* 
* @param obj 需要绑定事件处理函数的所有者,null 表示 window 对象 
* @param func 需要绑定的事件处理函数名 
* @param ... 第三个参数开始为绑定事件处理函数的参数,由 0 到多个构成 
*/ 
bind: function(obj, handler) { 
obj = obj || window; 
var args = []; 
for(var i =2; i < arguments.length; i++) 
{ 
args.push(arguments[i]); 
} 
return function() { handler.apply(obj, args) }; 
} 
} 
可能是使用方式为: 
function show(txtObj) { 
alert(txtObj.value); 
txtObj.focus(); 
txtObj.select(); 
} 
window.onload = function(){ 
var handler = new Handler(); 
handler.registerEvent($("txt"), "change", handler.bind(null,show,$("txt")));//采用2级事件模型的方式 
//$("txt").onchange = handler.bind(null,show,$("txt"));//JavaScript事件属性的方式 
}
Javascript 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
js的touch事件的实际引用
Oct 13 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
vue中英文切换实例代码
Jan 21 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 #Javascript
动态添加js事件实现代码
Mar 12 #Javascript
javascript prototype 原型链
Mar 12 #Javascript
10个新的最有前途的JavaScript框架
Mar 12 #Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
Mar 10 #Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 #Javascript
Iframe thickbox2.0使用的方法
Mar 05 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python绘制动态水球图过程详解
2020/06/03 Python
美国创意之家:BulbHead
2017/07/12 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
校园运动会广播稿
2014/10/06 职场文书
大学生党性分析材料
2014/12/19 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS