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 相关文章推荐
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
浅谈javascript的调试
Jan 28 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
session 的生命周期是多长
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
js表单验证实例讲解
2016/03/31 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
python制作填词游戏步骤详解
2019/05/05 Python
python 实现视频 图像帧提取
2019/12/10 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python与C/C++的相互调用案例
2021/03/04 Python
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
小班秋游活动方案
2014/02/22 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
文明单位汇报材料
2014/12/24 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python