javascript中通用的绑定事件代码

最新推荐文章于 2024-06-20 09:38:16 发布

baother0

最新推荐文章于 2024-06-20 09:38:16 发布

阅读量816

点赞数

分类专栏： javascript

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript进行事件绑定的方法，并展示了如何利用这些绑定来实现输入验证。通过简单的HTML表单示例，演示了如何在不同浏览器环境下兼容地添加和移除事件监听器，同时实现了焦点获取和失去时的背景色变化以及输入内容的数字验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var EventUtil = {
addHandler:function (obj,eventName,eventFunc) {
				   if (obj.addEventListener) {
						   obj.addEventListener (eventName,eventFunc,false);
				   }else if (obj.attachEvent) {
						   alert ("ie");
						   obj.attachEvent ("on"+eventName,eventFunc);
				   }else {
						   obj["on"+eventName] = eventFunc;	
				   }
		   },
removeHandler:function (obj,eventName,eventFunc) {
					  if (obj.removeEventListener) {
							  obj.removeEventListener (eventName,eventFunc,false);
					  }else if (obj.detachEvent) {
							  obj.detachEvent ("on"+eventName,eventFunc);
					  }else {
							  obj["on"+eventName] = eventFunc;	
					  }
			  }
};
eg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:n ="http://www.w3.org/1999/xhtml">
<head>
<title>js</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type = "text/javascript"'>
/**绑定事件代码**/
var EventUtil = {
addHandler:function (obj,eventName,eventFunc) {
				   if (obj.addEventListener) {
						   obj.addEventListener (eventName,eventFunc,false);
				   }else if (obj.attachEvent) {
						   alert ("ie");
						   obj.attachEvent ("on"+eventName,eventFunc);
				   }else {
						   obj["on"+eventName] = eventFunc;	
				   }
		   },
removeHandler:function (obj,eventName,eventFunc) {
					  if (obj.removeEventListener) {
							  obj.removeEventListener (eventName,eventFunc,false);
					  }else if (obj.detachEvent) {
							  obj.detachEvent ("on"+eventName,eventFunc);
					  }else {
							  obj["on"+eventName] = eventFunc;	
					  }
			  }
};
</script>
</head>
<body>
<form name = "form_1">
<input type = "text" name = "username" size = "12"/>	
</form>
<script type="text/javascript">
var input_1= document.forms[0].elements[0];
EventUtil.addHandler (input_1,"focus",function (event) {
				event = event||window.event;
				var target = event.srcElement || event.target;
				if (target.style.backgroundColor != "red") {
				target.style.backgroundColor = "yellow";
				}	
				});

EventUtil.addHandler (input_1,"blur",function (event) {
				event = event||window.event;
				var target = event.srcElement || event.target;
				if (/[^\d]/.test(target.value)) {
				target.style.backgroundColor = "red";
				}else {
				target.style.backgroundColor = "";	
				}
				});

EventUtil.addHandler (input_1,"change",function (event) {
				event = event||window.event;
				var target = event.srcElement || event.target;
				if (/[^\d]/.test(target.value)) {
				target.style.backgroundColor = "red";
				}else {
				target.style.backgroundColor = "";	
				}
				});
</script>
</body>
</html>