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移除事件 js绑定事件实例应用
Nov 28 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现简单评论区功能
Oct 26 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php 高效率写法 推荐
2010/02/21 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JS 统计时间
2021/03/09 Javascript
Javascript 对象的解释
2008/11/24 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
Python类继承和多态原理解析
2020/02/05 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
python中使用np.delete()的实例方法
2021/02/01 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
土木工程应届生求职信
2013/10/31 职场文书
求职毕业生自荐书
2014/02/08 职场文书
食品安全承诺书
2014/05/22 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014年路政工作总结
2014/12/10 职场文书
埃及王子观后感
2015/06/16 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技