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 相关文章推荐
多引号嵌套的变量命名的问题
May 09 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js实现无缝循环滚动
Jun 23 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
js常见遍历操作小结
Jun 06 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
vue 子组件修改data或调用操作
Aug 07 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中使用PDF文档功能
2006/10/09 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
vue如何截取字符串
2019/05/06 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
python实现决策树
2017/12/21 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python实现随机漫步功能
2018/07/09 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python龙贝格法求积分实例
2020/02/29 Python
软件测试有哪些?什么是配置项?
2012/02/12 面试题
网上商城创业计划书范文
2014/01/31 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
购房协议书
2014/04/11 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
总经理岗位职责范本
2015/04/01 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技