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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
深入理解js promise chain
May 05 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
python利用Guetzli批量压缩图片
2017/03/23 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
幼儿园小班植树节活动方案
2014/03/04 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
房地产项目合作意向书
2015/05/08 职场文书
原告离婚代理词
2015/05/23 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
vue中div禁止点击事件的实现
2022/04/02 Vue.js