事件冒泡和传播

举栗子

事件输出hello world

事件有两种,一种为事件传播,一种是事件冒泡

事件传播和事件冒泡

这还要从遥远的荒诞说起,两家网景和ie,为了能争夺市场,互相使用相反的技术,当网景使用事件传播的时候,ie使用事件冒泡。(两个正好相反)这个时候w3c来了,为了能规范规定,直接取折中,当事件发生时,先发生向下传播,当到底了以后再次使用事件冒泡,逐渐的冒泡到顶层window

DOM为一个完整的树

使用事件传播输出hello world

html如下

<!DOCTYPE html> 
<html>
  <head>
  	<meta charset="utf-8">
  	<link href="./index.css" type="text/css" rel="stylesheet">
    <title>Hello world</title>
  </head>
  <body>
    <div id="div1">
    	<div id="div2">
    		<span id="div3">点击这里</span>
    	</div>
    </div>
  </body>
</html>
<script src="./index.js"></script>

css如下

* {
	margin:0;
	padding:0;
	border:0;
}

#div1 {
	width:300px;
	height:300px;
	background:#c7e0d9;
	position:relative;
}

#div2 {
	width:100px;
	height:100px;
	background:#8ac3d8;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto;
	text-align:center;
	line-height:100px;
}

显示的效果如下

下面书写js

冒泡

先使用冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
	alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
	alert("hello world! 你点击的是内框");
}, false);
div3.addEventListener('click', () => {
	alert("hello world! 你点击的是文字");
}, false);

当为false的时候为冒泡。否则为事件传播

冒泡为上,事件传播为下,事件传播优于事件冒泡

可以明确的知道,此时为false为冒泡,即全部向上传播,这个比较简单不在阐述

阻止进一步冒泡

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
	alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
	alert("hello world! 你点击的是内框");
	event.stopPropagation();	// 阻止该事件进一步传播
}, false);
div3.addEventListener('click', () => {
	alert("hello world! 你点击的是文字");
}, false);

js如上,在div2内部使用event.stopPropagation()阻止进一步冒泡

结果如下

可以看到明显的被阻挡

传播

传播方向更冒泡相反,为向下,且传播优先于冒泡

并且事件先进行向上传,直到遇到设置为冒泡的元素的时候,停止向上传,开始进行从上到下的捕获,先最外层捕获,然后逐层捕获,直到完成。

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
	alert("hello world! 你点击的是外框!");
}, true);
div2.addEventListener('click', () => {
	alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener('click', () => {
	alert("hello world! 你点击的是文字");
}, true);

传播优先于冒泡

js如下

// 获取元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

// 绑定事件
// 当单击外部方框的时候
div1.addEventListener('click', () => {
	alert("hello world! 你点击的是外框!");
}, false);
div2.addEventListener('click', () => {
	alert("hello world! 你点击的是内框");
}, true);
div3.addEventListener('click', () => {
	alert("hello world! 你点击的是文字");
}, true);

演示

ps: 最近在写gitchat 有点慢

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户画像

图片 垂直居中

9420
来自专栏前端知识分享

第18天:京东网页头部制作

一、京东页面制作开始(头部) 1、浮动的盒子宽度由内容定,不需要设置宽度 2、绝对定位不占位置,相对定位占位置

11620
来自专栏九彩拼盘的叨叨叨

让内容恰好占一屏,适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏,并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意,直接谈如何实现。

12030
来自专栏闻道于事

表格及布局——0606上午

今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

309100
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

12040
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

32270
来自专栏闻道于事

CSS样式表

CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。 元素的大小: #div1{ width:30...

44280
来自专栏极乐技术社区

wxss学习《四》字体,组件及API的思维导图

一:字体 一.字体:font。设置对象的文本特性。 1.font-style:文字样式。 取值:normal 正常的字体, italic 斜体字, o...

213100
来自专栏前端知识分享

第119天:移动端:CSS像素、屏幕像素和视口的关系

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixe...

17050
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

359100

扫码关注云+社区

领取腾讯云代金券