echarts 树形图 文字点击事件_DOM事件模型和DOM事件机制

DOM事件

一、首先提个问题：下面代码中

（1）

• 点击文字，算不算点击儿子？
• 点击文字，算不算点击爸爸？
• 点击文字，算不算点击爷爷？

（2）调用顺序是什么？也就是控制台是从外到内打印1，2，3还是从内到外3，2，1？

<div class='爷爷'>
     <div class='爸爸'> 
        <div class="儿子">文字</div>
     </div>
</div>
<script>
  let ye =document.querySelector('.爷爷')
  let ba =document.querySelector('.爸爸')
  let er =document.querySelector('.儿子')
  ye.addEventListener('click',()=>{
   console.log(1)
})
  ba.addEventListener('click',()=>{
   console.log(2)
})
 er.addEventListener('click',()=>{
   console.log(3)
})
</script>

为此W3C发布规则：

<