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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
JavaScript实现登录窗体
Jun 22 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函数解决SQL injection
2006/12/09 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php检测url是否存在的方法
2015/04/14 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php实现记事本案例
2020/10/20 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
python保存字符串到文件的方法
2015/07/01 Python
python中函数传参详解
2016/07/03 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python 字符串和整数的转换方法
2018/06/25 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
蓝颜请假条
2014/04/11 职场文书
公共场所标语
2014/06/30 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
简单租房协议书
2014/10/21 职场文书
铁路安全反思材料
2014/12/24 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python