原生JS实现兼容所有浏览器的事件处理对象

最新推荐文章于 2021-08-17 12:04:13 发布

「已注销」

最新推荐文章于 2021-08-17 12:04:13 发布

阅读量157

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45395575/article/details/105384852

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
  <html>
	<head>
	  <meta charset="UTF-8">
	  <title>Event对象跨浏览器兼容写法</title>
	</head>
    <body>
	  <div id="parent">
		<div id="child">点击我</div>
	  </div>
	  <a href="http://www.baidu.com" id="a">跳转链接</a>
	  <script type="text/javascript">
		//Event addEventListener chrome firefox  IE9  event.target   preventDefault    stopPropagation
		//Event attachEvent  IE8系列的     event.srcElement     returnValue    cancelBubble 
		//声明一个对象EvenUtil
		var EventUtil = {
		  addHandler: function(element, type, handler) {
			//绑定(添加)事件
			//Chrome Firefox IE9等     addEventListener 
			//IE8及IE8以下的浏览器     attachEvent 
			if(element.addEventListener) {
				element.addEventListener(type, handler, false);
			} else if(element.attachEvent) {
				element.attachEvent("on" + type, handler);
			} else {
				element["on" + type] = handler
			}
		  },
		  removeHandler: function(element, type, handler) {
			//移除事件
			//Chrome Firefox IE9等      
			//IE8及IE8以下的浏览器     
			if(element.removeEventListener) {
				element.removeEventListener(type, handler, false);
			} else if(element.detachEvent) {
				element.detachEvent("on" + type, handler);
			} else {
				element["on" + type] = handler
			}
		  },
          //获取event对象
		  getTarget: function(event) {
			return event.target || event.srcElement;
		  },
          //取消事件默认动作
		  preventDefault: function(event) {
			if(event.preventDefault) {
				event.preventDefault();
			} else {
				event.returnValue = false;
			}
		  },
             //阻止冒泡
		  stopPropagation: function(event) {
			if(event.stopPropagation) {
				event.stopPropagation()
			} else {
				event.cancelBubble = true;
			}
		  }
	  }
		
	  var parent = document.getElementById("parent");
	  EventUtil.addHandler(parent, "click", function(event) {
		alert("parent被触发了")	
	  })
	
	  var child = document.getElementById("child");
	  EventUtil.addHandler(child, "click", function(event) {
		//alert(111) 
		alert("child被触发了")	
		var target = EventUtil.getTarget(event);
		console.log(target);
		//阻止事件冒泡
		EventUtil.stopPropagation(event)
	  })
	  var a = document.getElementById("a");
	  EventUtil.addHandler(a, "click", function(event) {
		EventUtil.preventDefault(event);	
	  })
	</script>
  </body>
</html>

可以直接将EventUtil对象粘贴下来使用

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现兼容所有浏览器的事件处理对象

直接上代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event对象跨浏览器兼容写法</title> </head> <body> <div id="parent"> <...
复制链接

扫一扫