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 相关文章推荐
JQuery each打印JS对象的方法
Nov 13 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
js友好的时间返回函数
Aug 24 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 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
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
python读写二进制文件的方法
2015/05/09 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
现金会计岗位职责
2013/12/05 职场文书
毕业生实习鉴定
2013/12/11 职场文书
大学生创业感言
2014/01/25 职场文书
报关专员求职信范文
2014/02/22 职场文书
2014年元旦感言
2014/03/06 职场文书
房屋继承公证书
2014/04/10 职场文书
师恩难忘教学反思
2014/04/27 职场文书
四风问题查摆材料
2014/08/25 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android