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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
自动完成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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
来自PHP.NET的入门教程
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python之用户输入的实例
2018/06/22 Python
Django 内置权限扩展案例详解
2019/03/04 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python同时替换多个字符串方法示例
2019/09/17 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
社区工作者思想汇报
2014/01/13 职场文书
酒店员工检讨书
2014/02/18 职场文书
争做文明公民倡议书
2014/08/29 职场文书
感谢信的格式
2015/01/21 职场文书
公司人事任命通知
2015/04/20 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技