面试 js事件捕获和冒泡是怎么样的流程呢

捕获的具体流程： 从window ->document->html->body->父元素->目标阶段

案例：

window.addEventListener('click',function(){

  console.log('捕获 window 1')

}, true)

document.addEventListener('click',function(){

  console.log('捕获 document 2')

}, true)

document.getElementsByTagName('html')[0].addEventListener('click',function(){

  console.log('捕获 html 3')

}, true)

document.body.addEventListener('click',function(){

  console.log('捕获 body 4')

}, true)

<el-button @keyup.enter.native="onSubmit" @click="getTableList()">查看</el-button>  // 点击查看具体出来结果。

getTableList(){ console.log('目标元素 5') }

点击按钮的运行结果

那么来了，捕获的流程是怎么样的呢？相信很多人看到上面例子知道，捕获的

目标元素->body->html->document->window

代码如下：去掉true，addEvenetListner函数默认参数是false。

window.addEventListener('click',function(){

  console.log(' 捕获  window 1')

})

document.addEventListener('click',function(){

  console.log('捕获 document 2')

})

document.getElementsByTagName('html')[0].addEventListener('click',function(){

  console.log('捕获 html 3')

})

document.body.addEventListener('click',function(){

  console.log('捕获 body 4')

})

那么看看点击按钮，运行结果是什么？

冒泡的运行结果