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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
js制作支付倒计时页面
Oct 21 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 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生成shtml类用法实例
2014/12/09 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue.js中npm安装教程图解
2018/04/10 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python struct.unpack
2008/09/06 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
机关出纳岗位职责
2014/04/03 职场文书
学雷锋月活动总结
2014/04/25 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
检讨书格式
2015/01/23 职场文书
电影开国大典观后感
2015/06/04 职场文书
诚信教育主题班会
2015/08/13 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python