【JS】事件委托

最新推荐文章于 2024-09-18 14:33:27 发布

Dora_5537

最新推荐文章于 2024-09-18 14:33:27 发布

阅读量163

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Dora_5537/article/details/102003251

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

什么是 EventUtil ？请参考：https://www.cnblogs.com/hykun/p/EventUtil.html

<!DOCTYPE html>
<html>
<head>
	<title>事件委托</title>
	<style>
		#main{
			width: 100%;
			height: 200px;
			position: relative;
			border: 1px solid black; 
		}
	</style>
</head>
<body>
	<div id="main">
		<ul id='myLinks'>
			<li id="goSomewhere">Go Somewhere</li>
			<li id="doSomething">Do something</li>
			<li id="sayHi">Say hi</li>
		</ul>
	</div>
	<script>
		var EventUtil={

			addHandler:function(element,type,handler){ //添加事件
				if(element.addEventListener){
					element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
				}else if(element.attachEvent){                    //使用IE方法添加事件
					element.attachEvent("on"+type,handler);
				}else{
					element["on"+type]=handler;          //使用DOM0级方法添加事件
				}
			},

			removeHandler:function(element,type,handler){  //取消事件
				if(element.removeEventListener){
					element.removeEventListener(type,handler,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,handler);
				}else{
					element["on"+type]=null;
				}
			},

			getEvent:function(event){  //使用这个方法跨浏览器取得event对象
				return event?event:window.event;
			},

			getTarget:function(event){  //返回事件的实际目标
				return event.target||event.srcElement;
			},

			preventDefault:function(event){   //阻止事件的默认行为
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue=false;
				}
			},

			stopPropagation:function(event){  //立即停止事件在DOM中的传播
				//避免触发注册在document.body上面的事件处理程序
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					event.cancelBubble=true;
				}
			},

			getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
				if(event.relatedTarget){
					return event.relatedTarget;
				}else if(event.toElement){      //兼容IE8-
					return event.toElement;
				}else if(event.formElement){
					return event.formElement;
				}else{
					return null;
				}
			},

			getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
				if(document.implementation.hasFeature("MouseEvents","2.0")){
					return event.button;
				}else{
					switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
						case 0:
						case 1:
						case 3:
						case 5:
						case 7:
							return 0;  //按下的是鼠标主按钮（一般是左键）
						case 2:
						case 6:
							return 2;  //按下的是中间的鼠标按钮
						case 4:
							return 1;  //鼠标次按钮（一般是右键）
					}
				}
			},

			getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
				if(event.wheelDelta){
					return event.wheelDelta;
				}else{
					return -event.detail*40;
				}
			},

			getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用
				if(typeof event.charCode=="number"){
					return event.charCode;
				}else{
					return event.keyCode;
				}
			}

		};

		// var item1 = document.getElementById("goSomewhere");
		// var item2 = document.getElementById("doSomething");
		// var item3 = document.getElementById("sayHi");
		// EventUtil.addHandler(item1,'click',function(event){
		// 	location.href = "http://www.wrox.com";
		// });
		// EventUtil.addHandler(item2,'click',function(event){
		// 	document.title = "I change the docunment's title";
		// });
		// EventUtil.addHandler(item3,'click',function(event){
		// 	alert('hi!');
		// });

		var list = document.getElementById("myLinks");
		EventUtil.addHandler(list,'click',function(event){
			event = EventUtil.getEvent(event);
			var target = EventUtil.getTarget(event);

			switch(target.id){
				case "goSomewhere":
					location.href = "http://www.wrox.com";
					break;
				
				case "doSomething":
					document.title = "I change the docunment's title";
					break;

				case "sayHi":
					alert('hi!');
					break;
			}
		});

	</script>
</body>
</html>