事件冒泡，事件捕获

最新推荐文章于 2022-07-17 13:03:40 发布

koukou0419

最新推荐文章于 2022-07-17 13:03:40 发布

阅读量89

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/koukou0419/article/details/80524380

版权

前端同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

//事件处理模型
// 1.事件冒泡：结构上（非视觉上）存在父子关系嵌套关系元素，会把该事件冒泡向父元素，自子元素冒泡向父元素（自底向上），就算该子元素不绑定事件，也会出现冒泡。
// 2.事件捕获：只有谷歌好使，点击子元素，事件会先从父元素开始捕获，直至到该子元素执行（自顶向下）
//一个事件对象只能处理一个事件模型，不能同时冒泡和捕获

//触发顺序，先捕获，后冒泡

//冒泡功能：当点击最底层子元素box，分别打印出黄色，绿色，红色框的内容，也就是说事件会从子元素向父元素上面冒泡，先执行子元素，然后冒泡向父元素

//捕获模型，把事件里面的false改为true将变成捕获模型，和冒泡相反的是，触发box子元素事件，事件会先被最顶层的父元素捕获然后依次向子元素里面传递，直到子元素被执行

//判断冒泡和捕获的执行顺序

//改变box的捕获和冒泡顺序后

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.wraper{
			width:300px;
			height:200px;
			background-color: red;
			text-align: center;
			vertical-align:center;
		}
		.content{
			width:200px;
			height:100px;
			background-color: green;
		}
		.box{
			width:100px;
			height:50px;
			background:yellow;
		}

	</style>
</head>
<body>
	<div class="wraper">
		wraper
		<div class="content">
			content
			<div class="box">box</div>
		</div>
	</div>
	

	          <ul>
				<li>a</li>
				<li>b</li>
				<li>c</li>
			</ul>		
	<script>
	   var div=document.getElementsByTagName('div');
	   var wraper=document.getElementsByClassName('wraper')[0];
	   var content=document.getElementsByClassName('content')[0];
	   var box=document.getElementsByClassName('box')[0];
	   
	   	wraper.addEventListener('click',function(){
	   		 console.log("wraperBulle");
	   	},false);
	   	content.addEventListener('click',function(){
	   		 console.log("contentBubble");
	   	},false);

	   	
//点击box区域，先出那块
	   	wraper.addEventListener('click',function(){
	   		 console.log("wraper");
	   	},true);
	   	content.addEventListener('click',function(){
	   		 console.log("content");
	   	},true);
	   	box.addEventListener('click',function(){
	   		 console.log("box");
	   	},true);
	   	box.addEventListener('click',function(){
	   		 console.log("boxBubble");
	   	},false);
	   	//

koukou0419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡，事件捕获

//事件处理模型// 1.事件冒泡：结构上（非视觉上）存在父子关系嵌套关系元素，会把该事件冒泡向父元素，自子元素冒泡向父元素（自底向上），就算该子元素不绑定事件，也会出现冒泡。// 2.事件捕获：只有谷歌好使，点击子元素，事件会先从父元素开始捕获，直至到该子元素执行（自顶向下）//一个事件对象只能处理一个事件模型，不能同时冒泡和捕获//触发顺序，先捕获，后冒泡...
复制链接

扫一扫