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 对象介绍
Jan 20 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
js中作用域的实例解析
Mar 16 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
自动完成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 UTF-8、Unicode和BOM问题
2010/05/18 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
Python正则简单实例分析
2017/03/21 Python
python版简单工厂模式
2017/10/16 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
在python image 中实现安装中文字体
2020/05/16 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
门面租赁合同范文
2019/08/06 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
如何利用python创作字符画
2022/06/25 Python