JavaScript：事件流

最新推荐文章于 2024-03-11 21:23:53 发布

胖韩

最新推荐文章于 2024-03-11 21:23:53 发布

阅读量225

点赞数 1

事件流

当HTML页面与JavaScript进行交互时，需要通过事件驱动实现，例如：鼠标的点击事件、页面的滚动事件、加载等等，而想要知道这些事件是在什么情况下进行调用，则需要进一步的了解“事件流”。

什么是事件流？

描述的是从页面中接收事件的顺序，也可以理解为事件的传播顺序。
DOM事件流的三阶段分别是：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件处理程序

“DOM2级事件”定义了两个方法用于处理制定或者删除的事件处理程序的操作：addEventListener()和removeEventListener()，需接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值若为true，则表示在捕获阶段调用事件处理程序，反之，则是在冒泡阶段调用事件处理程序。
DOMäºä»¶æµ

事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title> 
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
		
		 <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn处于事件捕获阶段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn处于事件冒泡阶段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document处于事件捕获阶段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document处于事件冒泡阶段');
        }, false);  
				
    };

    </script>
</body>
</html>

事件的作用范围

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wrap {
				width: 200px;
				height: 200px;
				background: fuchsia;
			}

			#outer {
				position: relative;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}

			#inner {
				position: relative;
				top: 25px;
				left: 25px;
				width: 50px;
				height: 50px;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="outer">
				<div id="inner"></div>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.getElementById('wrap');
			wrap.addEventListener('click', function() {
				alert('我是wrap');
			}, false);
		</script>
	</body>
</html>

根据上面的例子，当点击紫色div（包括被子元素覆盖的部分）的任意一部分，都会弹出“我是wrap”，点击div之外的地方没有任何反应，元素注册事件的作用范围为元素自身在页面中所占的空间大小，但是真的就是这样吗？
只是通过css将蓝色div放在wrap之外，HTML和js不变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wrap {
				width: 200px;
				height: 200px;
				background: orange;
			}

			#outer {
				position: relative;
				top: 50px;
				left: 50px;
				width: 100px;
				height: 100px;
				background: #eeddff;
			}

			/*inner中的top被修改*/
			#inner {
				position: relative;
				top: 152px;
				left: 25px;
				width: 50px;
				height: 50px;
				background: #44ddff;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="outer">
				<div id="inner"></div>
			</div>
		</div>
		<script type="text/javascript">
			var wrap = document.getElementById('wrap');
			wrap.addEventListener('click', function() {
				alert('我是wrap');
			}, false);
		</script>
	</body>
</html>

当点击蓝色div时，“我是wrap”照样弹出，由此可知：当元素注册了事件,此事件的作用范围为:元素自己身占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上，则事件的作用范围为容器元素自身所占空间大小)。

事件的执行顺序

由事件的作用范围，我们得出当元素注册了事件,此事件的作用范围为:元素自己身占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上，则事件的作用范围为容器元素自身所占空间大小)的结论，那么当点击事件发生时，它们的执行顺序又是怎样呢？

事件冒泡

事件开始时由最具体的元素(即文档中嵌套的层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。
我们将事件处理程序的布尔值改为false，使元素处于冒泡阶段调用事件处理程序。
CSS和HTML代码不变，JS代码为：

var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

wrap.addEventListener('click',function(){
  alert('我是wrap');
},false);
outer.addEventListener('click',function(){
  alert('我是outer');
},false);
inner.addEventListener('click',function(){
  alert('我是inner');
},false);

实验过后我们得知：当触发点击事件时，先弹出的是“我是inner”，接着是“我是outer”，最后是“我是wrap”，因此，当容器元素及其嵌套元素都在冒泡阶段调用事件处理程序时：事件按事件冒泡的顺序执行事件处理程序，即由最具体的元素(即文档中嵌套的层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。

事件捕获

事件捕获是指不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
如：我们将事件处理程序的布尔值改为true，使元素处于捕获阶段调用事件处理程序。
CSS和HTML代码不变，JS代码为：

var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
    
wrap.addEventListener('click',function(){
  alert('我是wrap');
},true);
outer.addEventListener('click',function(){
  alert('我是outer');
},true);
inner.addEventListener('click',function(){
  alert('我是inner');
},true);

当我们点击页面中心浅蓝色的部分时，先是弹出“我是wrap”，接着弹出“我是outer”，最后弹出“我是inner”。因此当容器元素及其嵌套元素都在捕获阶段调用事件处理程序时：事件按事件捕获的顺序执行事件处理程序。

胖韩

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：事件流

事件流当HTML页面与JavaScript进行交互时，需要通过事件驱动实现，例如：鼠标的点击事件、页面的滚动事件、加载等等，而想要知道这些事件是在什么情况下进行调用，则需要进一步的了解“事件流”。什么是事件流？描述的是从页面中接收事件的顺序，也可以理解为事件的传播顺序。DOM事件流的三阶段分别是：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件处理程序“DOM2级事件”定...
复制链接

扫一扫