事件监听与兼容性处理-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40657321/article/details/106998879

	<body>
		<input type="button" name="btn" id="btn" value="按钮" />
			
		<script>
			var oBtn=document.getElementById("btn");
//			oBtn.οnclick=fn1;原来方法无法一一调用，现在启用事件监听
//			oBtn.οnclick=fn2;
//			oBtn.οnclick=fn3;
			
			//标准浏览器添加时事件监听
			//oBtn(对象).addEventListener()有三个参数
			//1.'事件'  如:click
			//2.函数
			//3.boo(true:事件捕获，false:事件冒泡),默认为事件冒泡
//			oBtn.addEventListener('click',fn1,false);
//			oBtn.addEventListener('click',fn2,false);
//			oBtn.addEventListener('click',fn3,false);
			
			
			//IE浏览器添加事件监听
			//oBtn(对象).attachEvent()两个参数
			//1.'事件驱动'  如：onclick
			//2.函数
//			oBtn.attachEvent('onclick',fn1);
//			oBtn.attachEvent('onclick',fn2);
//			oBtn.attachEvent('onclick',fn3);

			//添加事件监听的兼容
			addEventListener(oBtn,'click',fn1,false);
			addEventListener(oBtn,'click',fn2,false);
			addEventListener(oBtn,'click',fn3,false);
			function addEventListener(obj,event,fn,boo){
				if(obj.addEventListener){
					obj.addEventListener(event,fn,boo);
				}else{
					obj.attachEvent('on'+event,fn);
				}
				
			}
			
			//标准浏览器
			//删除事件监听,用法与添加事件监听相同
			//oBtn(对象).removeEventListener()有三个参数
			//1.'事件'  如:click
			//2.函数
			//3.boo(true:事件捕获，false:事件冒泡),默认为事件冒泡
//			oBtn.removeEventListener('click',fn2,false);
			
			//IE浏览器
			//删除事件监听,用法与添加事件监听相同
			//oBtn(对象).detachEvent()两个参数
			//1.'事件驱动'  如：onclick
			//2.函数
//			oBtn.detachEvent('onclick',fn2);
			
			//删除事件监听的兼容
			removeEventListener(oBtn,'click',fn2,false);
			function removeEventListener(obj,event,fn,boo){
				if(obj.removeEventListener){
					obj.removeEventListener(event,fn,boo);
				}else{
					obj.detachEvent('on'+event,fn);
				}
			}
			
			function fn1(){
				alert(1);
			}
			function fn2(){
				alert(2);
			}
			function fn3(){
				alert(3);
			}
			
			
		</script>
		
	</body>