这个涉及到了冒泡与捕获，冒泡和捕获：

----在页面中点击一个元素，事件是从这个元素的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。
----当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。

直接上例子

HTML
<div id="a" style="width: 400px;height: 400px;background-color: rgb(165, 146, 146);">a<div id="b" style="width: 300px;height: 300px;background-color: rgb(233, 76, 76);">b<div id="c" style="width: 200px;height: 200px;background-color: rgb(185, 127, 127);">c<div id="d" style="width: 100px;height: 100px;background-color: rgb(90, 81, 81);">d</div></div></div>
</div>

addEventListener(事件，事件触发函数，捕获/冒泡)---当第三个参数-true:捕获，false/空:冒泡冒泡代码 JSdocument.getElementById('a').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);console.log("--------------------")});    document.getElementById('b').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);});    document.getElementById('c').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);});    document.getElementById('d').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);});
捕获代码 JSdocument.getElementById('a').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);console.log("--------------------")},true);    document.getElementById('b').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);},true);    document.getElementById('c').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);},true);    document.getElementById('d').addEventListener('click', function(e) {console.log('点击的是：' + e.target.id + '绑定的是:' + e.currentTarget.id);},true);

注：我只点击了d方块一次！

1、冒泡阶段运行结果：

2、捕获阶段运行结果：

分析：

根据输出的‘-----’的位置可以看出，
~冒泡阶段时：点击事件（顺序）由点击元素向根元素执行，此时的currentTarget由d==>a
~捕获阶段时：点击事件（顺序）由点击元素的根元素向点击元素执行currentTarget由a==>d
说白了： target就是点击的那个元素，currentTarget是绑定事件的元素

冒泡与捕获，target与currenTarget的区别相关推荐

16.target和currenTarget的区别？
target:就是事件源 currentTarget:当前事件源(当前触发到哪个事件元素,那么这个事件元素就是事件源),跟this一样. <!doctype html> <html ...
js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
【原创翻译】生动详细解释javascript的冒泡和捕获，包懂包会
前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多次被提到,但又不知究竟应用在何处.找到了一些好文章解惑,在 ...
事件冒泡、捕获？如何阻止
事件冒泡 <style>div{color: white;font-size: 30px;}.content{width: 400px;height: 400px;background-c ...
javascript的冒泡与捕获、定时器
javascript的冒泡与捕获.定时器事件 1.绑定事件的区别 2.移除绑定事件的方式及区别和兼容代码 3.事件的三个阶段 4.事件冒泡 5.为同-一个元素绑定多个不同的事件,指向的是同-一个事件 ...

冒泡与捕获，target与currenTarget的区别

直接上例子

注：我只点击了d方块一次！

分析：

冒泡与捕获，target与currenTarget的区别相关推荐

最新文章

热门文章