跨浏览器的事件对象

最新推荐文章于 2019-03-01 21:20:11 发布

「已注销」

最新推荐文章于 2019-03-01 21:20:11 发布

阅读量201

点赞数

分类专栏： JavaScript知识点总结

本文链接：https://blog.csdn.net/gl767077147/article/details/78961585

版权

JavaScript知识点总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">Click me</button>
	<script>
		var EventUtil = {
			//添加DOM方法
			addHandler:function(element,type,handler){
				//是否支持DOM2级方法
				if(element.addEventListener){
					element.addEventListener(type,handler,false);
				}
				//兼容IE8以及更早版本
				else if(element.attachEvent){
					element.attachEvent('on'+type,handler);
				}
				//DOM0级方法
				else{
					element['on'+click] = handler;
				}
			},
			//删除DOM方法
			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;
				}
			},
			//获得事件对象event
			getEvent:function(event){
				return event || window.event;
			},
			//获得事件目标
			getTarget:function(event){
				return event.target || event.srcElement;
			},
			//取消事件冒泡
			stopPropagation:function(event){
				if(event.stopPropagation){
					event.stopPropagation();
				}else{
					//兼容IE以及低版本
					event.cancleBubble = true;
				}
			},
			//取消默认行为
			preventDefault:function(event){
				if(event.preventDefault){
					event.preventDefault();
				}else{
					event.returnValue = false;
				}
			}
		};
		var btn = document.getElementById('btn');
		btn.onclick = function(event){
			alert('clicked');
			//获取事件对象
			event = EventUtil.getEvent(event);
			//获取对象目标
			var target = EventUtil.getTarget(event);
			//取消事件冒泡,从而'body clicked 不会弹出'
			EventUtil.stopPropagation(event);
		};
		document.body.onclick = function(){
			alert('body clicked!');
		}
	</script>
</body>
</html>

在IE中，当event.returnValue = false时，取消默认行为，当event.cancleBubble = true时取消事件冒泡