事件冒泡和事件捕获事件冒泡和事件捕获

93 阅读 0 评论 62 点赞

我是靠谱客的博主幸福花卷，最近开发中收集的这篇文章主要介绍事件冒泡和事件捕获事件冒泡和事件捕获，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

事件冒泡和事件捕获

事件有三个阶段:
     1.事件捕获阶段 :从外向内
     2.事件目标阶段 :最开始选择的那个
     3.事件冒泡阶段 : 从里向外

事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了从里到外事件捕获:从外往里.

绑定事件: addEventListener(事件类型,事件函数,true);

效果图
在这里插入图片描述代码如下:

<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <title>title</title>
	  <style>
		#dv1{
		  width: 300px;
		  height: 200px;
		  background-color: red;
		}
		#dv2{
		  width: 250px;
		  height: 150px;
		  background-color: green;
		}
		#dv3{
		  width: 200px;
		  height: 100px;
		  background-color: blue;
		}
	  </style>
	</head>
	<body>
	<div id="dv1"> <!-- red -->
	  <div id="dv2"> <!-- green -->
		<div id="dv3"></div> <!-- blue -->
	  </div>
	</div>
	<script src="common1.js"></script>
	<script>
		mFun$("dv3").onclick = function(){
			console.log(this.id);
		}
		mFun$("dv2").onclick = function(){
			console.log(this.id);
			//阻止事件冒泡  IE 谷歌支持  火狐不支持
			//window.event.cancelBubble = true;
		}
		mFun$("dv1").onclick = function(e){
			console.log(this.id);
			console.log(arguments.length);//1
			console.log(arguments[0]);//对象
			e.stopPropagation();
		}
		document.body.onclick = function(){
			console.log("小将将");
		}
	</script>
	</body>
</html>

事件捕获

为元素绑定事件

addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的) 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡
window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
window.event就是一个对象,是IE中的标准

window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准

addEventListener中第三个参数是控制事件阶段的

事件的阶段有三个:

通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的如果这个属性的值是:

1---->捕获阶段
2---->目标阶段
3---->冒泡

一般默认都是冒泡阶段,很少用捕获阶段

冒泡阶段:从里向外
捕获阶段:从外向内

效果图
在这里插入图片描述 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1 {
      width: 300px;
      height: 200px;
      background-color: red;
    }

    #dv2 {
      width: 250px;
      height: 150px;
      background-color: green;
    }

    #dv3 {
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script src="common1.js"></script>
<script>
  var arr = [mFun$("dv1"),mFun$("dv2"),mFun$("dv3")];
  arr.forEach(function(element){
	  element.addEventListener("click",function(a){
		  console.log(this.id+","+a.eventPhase);
	  },false);
  });
</script>
</body>
</html>