事件流的顺序:
先捕获再冒泡 (先从外到内 再从内到外)
注意:事件流的一个元素捕获事件触发过了 那么此元素就不会在冒泡事件中再运行了
冒泡事件:(默认存在)
当一个元素触发事件后 会依次向上调用同名事件(必须是同名事件,如果子元素触发点击事件,父元素的鼠标的鼠标经过事件不会触发)
<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 就是代表捕获事件 从外往内
如果爸爸被阻止捕获了 那么无论点击儿子还是孙子 都只会触发爸爸及爸爸的父元素的事件 儿子和孙子本身的时事件也不会触发
