捕获的具体流程： 从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')
})
那么看看点击按钮，运行结果是什么？
冒泡的运行结果
网友评论