[原创]js绑定带参数的事件

最新推荐文章于 2022-10-05 16:34:02 发布

原创最新推荐文章于 2022-10-05 16:34:02 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #绑定带参事件 #ViewUI

Web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在JavaScript中实现事件绑定的方法，通过自定义Handler类，可以在不同浏览器环境下兼容地绑定事件，并且能够为事件处理函数传递参数。这种方法克服了传统DOM事件绑定无法直接传递参数的问题。

在JavaScript中，为了实现表现和控制相分离，可以通过0级的DOM事件属性或者2级的事件模型来实现，不过这两者在针对某个事件类型调用相应的事件句柄的时候，不能给事件句柄提供参数，也就是说，事件属性的值只能是一个函数引用。

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,arguments) {
		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事件属性的方式 
};

使用方式:

Ext.onReady(function() {
	var handler1 = new Handler();
	handler1.registerEvent(getId(FID_ResidenceMigration), 'click', handler1.bind(null, changeTd, new Array(FID_ResidenceMigration, 'tdate1')));
});

function getId(id) {
	return document.getElementById(id);
}

//事件js
function Handler() {
};
Handler.prototype = {
	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;
		}
	},
	bind : function(obj, handler, arguments) {
		obj = obj || window;
		var args = [];
		for ( var i = 0; i < arguments.length; i++) {
			args.push(arguments[i]);
		}
		return function() {
			handler.apply(obj, args);
		};
	}
};