一个有助于理解事件冒泡和事件捕获的例子

直接上代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.first {width: 500px;height: 500px;background-color: #0000cc;}.second {width: 300px;height: 300px;background-color: yellow;}</style>
</head><body><!--第一层DIV-->
<div class="first"><!--第二层DIV--><div class="second"><!--第三层中有个button--><input type="button" value="click" class="btn" /></div>
</div><script type="text/javascript">window.onload = function () {register();};function register() {//获取div以及buttonlet div1 = document.getElementsByClassName('first')[0];let div2 = document.getElementsByClassName('second')[0];let btn = document.getElementsByClassName('btn')[0];//为三个目标标签注册点击事件div1.addEventListener('click', func, false);div2.addEventListener('click', func, false);btn.addEventListener('click', func, false);}function func() {let dict = {'1': '捕获阶段','2': '处于目标阶段','3': '冒泡阶段'};alert(this.className.toLowerCase() + '的事件在' + dict[event.eventPhase] + '被触发');}</script></body>
</html>

先看一下运行效果：

现在点击按钮，会弹出三个对话框：

看到这里，聪明的你再稍微思考一下，应该就懂得事件冒泡了，可以把代码中addEventListener中的false改为true，然后再看一下运行效果，然后你就理解事件捕获了。

一个有助于理解事件冒泡和事件捕获的例子相关推荐

JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
你真的理解事件绑定、事件冒泡和事件委托吗？
一文了解Web API中的事件绑定.事件冒泡.事件委托引言正文一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
“约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理（建议收藏）
对于事件的传播机制,Netscape Communicator采用的是事件捕获(event capture),IE9.Safari.Chrome.Opera和Firefox采用的是事件冒泡(event ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
事件委托、事件冒泡与事件捕获
目录事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
Javascript中的事件捕获、事件冒泡与事件委托
看以下简单的三层div结构. <div id="grandparent"><div id="parent"><div id=&qu ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

一个有助于理解事件冒泡和事件捕获的例子

一个有助于理解事件冒泡和事件捕获的例子相关推荐

最新文章

热门文章