当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 事件属性绑定带参数的函数

Javascript
IE Firefox 使用自定义标签的区别
Javascript 圆角div的实现代码
js 获取网络图片的高度和宽度的实现方法(变通了下)
JavaScript 对象成员的可见性说明
JQuery困惑—包装集 DOM节点
JavaScript 三种创建对象的方法
半角全角相互转换的js函数
显示js对象所有属性和方法的函数
实现JavaScript中继承的三种方式
JavaScript 函数式编程的原理
JavaScript 定义function的三种方式小结
JavaScript 基于原型的对象(创建、调用)
层序遍历在ExtJs的TreePanel中的应用
将jQuery应用于login页面的问题及解决
document.onreadystatechange事件的用法分析
JS 仿Flash动画放大/缩小容器
javascript 定时自动切换的选项卡Tab
图片友情链接滚动 横向,带控制按钮
简单的加密css地址防止别人下载你的CSS文件的方法
图片与JavaScript配合做出个性滚动条

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 180 ::
收藏到网摘: n/a

在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事件属性的方式
}