javascript事件概念和事件监听,ie特殊和标准DOM，页面先加载

最新推荐文章于 2022-05-25 14:30:53 发布

lx__angel

最新推荐文章于 2022-05-25 14:30:53 发布

阅读量282

点赞数

文章标签：浏览器标准DOM 事件监听事件流监听方法

本文链接：https://blog.csdn.net/lx__angel/article/details/78763364

版权

事件流

事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、chrome等两者都支持。

HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件上加上return false

来组织它的默认行为。

通用性的事件监听方法：

绑定HTML元素属性

绑定DOM对象属性

document.getElementById("btn1").οnclick=test;

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
		
			function test1(){
				alert("绑定HTML元素属性");
			}
			
			function test2(){
				alert("绑定DOM对象属性");
			}
			
			
		
		</script>
	</head>
	<body>
	
		<a href="http://www.baidu.com" οnclick="return false">点击我</a>
		<input type="button" value="测试1" id="mytest1" οnclick="test1()"/>
		<button type="button" id="test2"><b>测试2</b></button>
		
		<script type="text/javascript">
			document.getElementById("test2").οnclick=test2;
		</script>
		
	
	</body>

</html>

使用IE来试试

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
		
			function show(){
				alert("hello ie");
			}
			
			window.οnlοad=function(){//谷歌浏览器都不支持这种方式。
				document.getElementById("test1").attachEvent("onclick",show);
				document.getElementById("test2").οnclick=function(){
					document.getElementById("test1").detachEvent("onclick",show);
				}
			}
		
		</script>
	</head>
	<body>
	
		<input type="button" value="测试一" id="test1"/>
		<button type="button" id="test2"><b>测试二</b></button>
	
	</body>

</html>

而使用Chorme浏览器都无法达到这个效果。

下面使用标准DOM添加和解除监听事件的方法

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
		
			function show(){
				alert("hello chrome");
			}
			
			window.οnlοad=function(){//支持Chrome，不支持IE
				var button1=document.getElementById("test1");
				button1.addEventListener("click",show,false);
				document.getElementById("test2").addEventListener("click",function(){
					button1.removeEventListener("click",show,false);
				},false);
				/*
				document.getElementById("test2").οnclick=function(){
					button1.removeEventListener("click",show,false);
				}
				*/
			}
		
		</script>
	</head>
	<body>
	
		<input type="button" value="测试一" id="test1"/>
		<button type="button" id="test2"><b>测试二</b></button>
	
	</body>

</html>

lx__angel

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript事件概念和事件监听,ie特殊和标准DOM，页面先加载

事件流事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、chrome等两者都支持。HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件上加上return false来组织它的默认行为。通用性的事件监听方法：绑定HTML元素属性绑定DOM对象属性document.getEl
复制链接

扫一扫