事件流的顺序:

先捕获再冒泡 (先从外到内 再从内到外)

注意:事件流的一个元素捕获事件触发过了 那么此元素就不会在冒泡事件中再运行了

冒泡事件:(默认存在)

当一个元素触发事件后 会依次向上调用同名事件(必须是同名事件,如果子元素触发点击事件,父元素的鼠标的鼠标经过事件不会触发)

<div class="grandf">爷爷<div class="fa">爸爸<div class="son">孙子</div></div></div>

grandf.addEventListener('click', function () {console.log('我是爷爷');})fa.addEventListener('click', function () {console.log('我是爸爸');})son.addEventListener('click', function () {console.log('孙子');})document.addEventListener('click', function () {console.log('我是大爷爷');}) //默认就是冒泡事件

点击孙子后的事件流程:

阻止冒泡:

书写:事件对象.stopPropagation() 配合事件对象e使用

stop:停止

propagation:l流动,传播

grandf.addEventListener('click', function () {console.log('我是爷爷');})fa.addEventListener('click', function () {console.log('我是爸爸');})son.addEventListener('click', function (e) {console.log('孙子');e.stopPropagation()})document.addEventListener('click', function () {console.log('我是大爷爷');}) //默认就是冒泡事件

在孙子出阻止冒泡 则点击孙子效果:

捕获事件:

当一个元素触发事件后 会依次向下调用同名事件(必须是同名事件, 例:子元素触发点击事件,父元素的鼠标经过事件不会触发)

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制) false/true true为使用捕获

grandf.addEventListener('click', function () {​console.log('我是爷爷');​ },true)//使用捕获机制​ fa.addEventListener('click', function () {​console.log('我是爸爸');​ },true)​ son.addEventListener('click', function () {​console.log('孙子');​ },true)​ document.addEventListener('click', function () {​console.log('我是大爷爷');​ },true)//加上true 就是代表捕获事件 从外往内

点击孙子 事件流程为:

阻止捕获:在哪个元素阻止捕获 此元素的子元素的同名事件就不会再捕获触发了(阻止元素本身可以捕获) 可以理解为:捕获事件截止的位置

理解:

如: 爷爷 爸爸 儿子 孙子 在爸爸处截止捕获 则点击儿子或者孙子只会出现触发 爸爸和爷爷

grandf.addEventListener('click', function () {​console.log('我是爷爷');​ },true)//使用捕获机制​ fa.addEventListener('click', function (e) {​console.log('我是爸爸');e.stopPropagation()​ },true)​ son.addEventListener('click', function () {​console.log('孙子');​ },true)​ document.addEventListener('click', function () {​console.log('我是大爷爷');​ },true)//加上true 就是代表捕获事件 从外往内

如果爸爸被阻止捕获了 那么无论点击儿子还是孙子 都只会触发爸爸及爸爸的父元素的事件 儿子和孙子本身的时事件也不会触发