DOM（三）event事件

最新推荐文章于 2024-08-20 17:01:17 发布

茂树茂树

最新推荐文章于 2024-08-20 17:01:17 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签：事件事件流事件冒泡事件捕获事件处理程序

本文链接：https://blog.csdn.net/wmaoshu/article/details/52145691

版权

本文详细介绍了DOM中的事件，包括事件的概念、事件流（冒泡与捕获）以及DOM0级和DOM2级事件处理程序。重点讨论了事件冒泡的原理与示例，以及在标准和非标准浏览器中如何添加、移除事件处理函数，并解决了跨浏览器兼容问题。此外，还提到了事件对象及其在不同浏览器中的使用差异。

摘要由CSDN通过智能技术生成

交代一个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<style type="text/css">
			div {padding:40px;}
			#div1{background: red;}
			#div2{background: orange;}
			#div3{background: green;}
		</style>
	</head>
	<body>
	<divid="div1"><divid="div2"><divid="div3"></div></div></div>
	<script type="text/javascript">
		var div1 = document.getElementById('div1');
		var div2 = document.getElementById('div2');
		var div3 = document.getElementById('div3')；
		/*此处详细内容由下面边说边填入 ---------1*/
	</script>
	</body>
</html>

事件

事件，就是文档或者浏览器窗口中发生的交互性的瞬间。如果文档或者浏览器窗口没有发生交互，也就是说，操作（点击，获得焦点，失去焦点等）文档中的某些元素，浏览器没有加载完成，浏览器窗口没有滚动，这些事件没有发生的话就不存在交互性的瞬间。
每个事件可以与具体的行为绑定。从而当初发该事件的时候会执行某种行为，同时也可以不绑定，那么当触发的时候不会执行任何行为。

事件流

事件流描述的是从页面中接受事件的顺序。接受事件的顺序有两种，一种是冒泡，一种是捕获。但是在非标准浏览器下仅仅支持事件冒泡，标准浏览器两者都支持。事件流的放生仅仅与文档中html元素的结构有关（或者与DOM树中结构有关），与这些元素在页面中呈现的方式无关。

###事件冒泡
当一个元素接受的发生的事件之后，会将这个事件沿着DOM树向上传播到不具体的节点（document）。在这个向上传播过程中，会触发每一个途径元素的该事件，如果这个事件没有与任何行为绑定，那么当经过这个元素时不会发生任何动作，否则，执行相应的动作。
Eg:
这里写图片描述
div3接受一个点击事件，同时根据事件冒泡原则，会将这个事件在DOM树中向document的方向传播。因为div3的onclick内置属性绑定了fun函数，所以会弹出div3，但是div2的onclick值没有与任何行为绑定值是空的，所以当onclick事件冒泡到div2的时候没有任何反应，同理div3会弹出div3。同理，document的onclick事件没有与任何行为绑定，所以也不会有显现的执行动作。