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 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 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获取数组最大值下标的方法
2015/05/12 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
prototype1.4中文手册
2006/09/22 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python实现简单成绩录入系统
2019/09/19 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python实现udp聊天窗口
2020/03/31 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
八一建军节慰问信
2015/02/14 职场文书
呐喊读书笔记
2015/06/30 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Hive导入csv文件示例
2022/06/25 数据库