JavaScript 事件属性绑定带参数的函数

 更新时间:2009年03月13日 22:28:37   作者:  
在JavaScript中,为了实现表现和控制相分离,可以通过0级的DOM事件属性或者2级的事件模型来实现,不过这两者在针对某个事件类型调用相应的事件句柄的时候,不能给事件句柄提供参数,也就是说,事件属性的值只能是一个函数引用。
例如不能采用这种调用方式: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中利用数组实现的循环队列代码

    javascript中利用数组实现的循环队列代码,需要的朋友可以参考下。
    2010-01-01
  • 小程序实现短信登录倒计时

    小程序实现短信登录倒计时

    这篇文章主要为大家详细介绍了小程序实现短信登录倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS判断点是否在线段上的代码

    JS判断点是否在线段上的代码

    这篇文章主要介绍了JS判断点是否在线段上的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • 非html5实现js版弹球游戏示例代码

    非html5实现js版弹球游戏示例代码

    弹球游戏,一般都是使用html5来实现的,其实不然,使用js也可以实现类似的效果,下面有个不错的示例,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • 浅谈微信JS-SDK 微信分享接口开发(介绍版)

    浅谈微信JS-SDK 微信分享接口开发(介绍版)

    这篇文章主要介绍了浅谈微信JS-SDK 微信分享接口开发(介绍版),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • js判断手机端(Android手机还是iPhone手机)

    js判断手机端(Android手机还是iPhone手机)

    现在使用手机上网的人越来越多,一些下载网站会通过判断不同系统手机来访问不同网页,比如iPhone和Android。下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问
    2015-07-07
  • JavaScript封装axios的实现详解

    JavaScript封装axios的实现详解

    这篇文章主要介绍了JavaScript封装axios的实现,Axios是一个开放源代码库,使我们可以轻松地发出HTTP请求。 实际上,它是通过额外的超能力来fetch
    2022-09-09
  • 微信小程序语音同步智能识别的实现案例代码解析

    微信小程序语音同步智能识别的实现案例代码解析

    在一些小程序的开发场景中经常会有语音转文字的需求,今天小编通过实际案例给大家分享微信小程序语音同步智能识别功能,需要的朋友可以参考下
    2020-05-05
  • JavaScript中Number的对象解析

    JavaScript中Number的对象解析

    这篇文章主要介绍了JavaScript中Number的对象解析,Number对象是数值对应的包装对象,可以作为构造函数使用,也可以作为工具函数使用,感兴趣的朋友可以参考一下下面文章内容
    2022-08-08
  • JS中6个对象数组去重的方法

    JS中6个对象数组去重的方法

    这篇文章主要给大家介绍了关于JS中6个对象数组去重的方法,javascript数组去重是一个比较常见的需求,解决方法也有很多种,文中每种解决方法都给出了示例代码,需要的朋友可以参考下
    2023-07-07

最新评论