事件冒泡和事件捕获

接连两次问我事件冒泡和事件捕获都没有答上来所以想记录下
事件冒泡：事件由内向外传播；

<div onclick="divClick">
<button onclick="btn()">
<p onclick="p()>事件冒泡</p>
</button>
</div>
 function p(){
    console.log('点击了p元素')
    }
    function btn(){
        console.log('点击了按钮')
    }
    function divClick(){
        console.log('div被点击')
    }

事件捕获：事件由外向内传播；

 <div>
        <button>
            <p>点击捕获</p>
        </button>
    </div>
     let op=document.querySelector('p');
    let ob=document.querySelector('button')
    let od=document.querySelector('div')
    op.addEventListener('click',function(){
        console.log('p被点击')
    },true)
    ob.addEventListener('click',function(){
        console.log('button被点击')
    },true)
    od.addEventListener('click',function(){
        console.log('div被点击')
    })