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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
js获取checkbox值的方法
Jan 28 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 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
Yii操作数据库的3种方法
2014/03/11 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
javascript每日必学之循环
2016/02/19 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python版本五子棋的实现代码
2018/12/11 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python自定义函数def的应用详解
2020/06/03 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
工程预算与管理应届生求职信
2013/10/06 职场文书
行政总经理岗位职责
2013/12/05 职场文书
应届生自荐信
2014/06/30 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
七夕情人节问候语
2015/11/11 职场文书
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL