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 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
javascript判断office版本示例
Apr 11 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
vue写一个组件
Apr 09 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
德生S2000电路分析
2021/03/02 无线电
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP生成树的方法
2015/07/28 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
phpfpm的作用和用法
2019/10/10 PHP
JS定时器实例详细分析
2013/10/11 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
使用Python实现博客上进行自动翻页
2017/08/23 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
小学敬老月活动方案
2014/02/11 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
python之django路由和视图案例教程
2021/07/26 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB