24
2019
02

事件监听

1、(IE低版本IE7,8)事件监听写法

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#hd{    
			width:500px;    
			height: 300px;    
			background: paleturquoise;    
			margin: 100px auto;				
    
			}    
			</style>    
		<script type="text/javascript">    
			window.onload = function(){    
//				IE的要加on    
				document.getElementById('hd').attachEvent('onclick',function(){    
					alert('低版本ie才能触发,高版本IE或其它流浏览器不支持这种写法');    
				}    
				)    
			}    
		</script>    
	</head>    
	<body>    
		<div id="hd"></div>    
	</body>    
</html>

2、判断选择浏览器(IE高低牌本和其它浏览器兼容写法)

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#hd{    
			width:500px;    
			height: 300px;    
			background: paleturquoise;    
			margin: 100px auto;				
    
			}    
			</style>    
		<script type="text/javascript">    
			window.onload = function(){    
//				判断浏览器  document.all   从语句上理解,就是判断这个网页存不存在DOM的对象    
				if (document.all) {//低版本IE    
//					alert('低版本ie');    
				document.getElementById('hd').attachEvent('onclick',function(){    
					alert('低版本ie才能触发,高版本IE或其它流浏览器不支持这种写法');    
				}    
				)    
				} else{//w3c规范济器用    
//					alert('w3c规范浏览器');    
				document.getElementById('hd').addEventListener('click',function(){    
				alert('IE高级版和w3c规范浏览器的写法');    
				}    
				)	    
				}    
////				addEventListener(事件监听)是w3c的标准方法,不支持ie低版本    'click'单击事件,'click'后面的function是单击事件要执行的函数    
//				第一个参数事件名,不要加on    
//				document.getElementById('hd').addEventListener('click',function(){    
//					alert('IE高级版和正常的写法');    
//				}    
//				)    
////				IE的要加on    
//				document.getElementById('hd').attachEvent('onclick',function(){    
//					alert('低版本ie才能触发,高版本IE或其它流浏览器不支持这种写法');    
//				}    
//				)    
			}    
		</script>    
	</head>    
	<body>    
		<div id="hd"></div>    
	</body>    
</html>

原文链接:https://www.qiquanji.com/post/7616.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。