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打字小游戏代码
Dec 26 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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/04/27 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
php异常处理捕获错误整理
2019/09/23 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jQuery 解析xml文件
2009/08/09 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python创建模块及模块导入的方法
2015/05/27 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python简单实现插入排序实例代码
2020/12/16 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
数据库笔试题
2013/05/09 面试题
职业教育毕业生求职信
2013/11/09 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
洗车工岗位职责
2014/03/15 职场文书
财务会计岗位职责
2015/02/03 职场文书