0131-2-关于事件捕获和冒泡

关于事件捕获和冒泡

DOM事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段

点击目标元素后，不会马上触发目标元素，而是先执行事件捕获，从顶部逐步到目标元素；处于目标阶段的时候触发目标元素；最后冒泡阶段，从目标元素逐步回到顶部。

<div class="container" id="container">
	<div class="item" id="item">
		<div class="btn" id="btn">
			Click me
		div>
	div>
div>

<script>
    document.addEventListener('click', (e) => {
        console.log('Document click');
        console.log(e);
    },{
        capture: true
    })

    container.addEventListener('click', (e) => {
        console.log('Container click')
        console.log(e.currentTarget, e.targeet)
    },{
        capture: true
    })

    item.addEventListener('click', () => {
        console.log('Item click')
    })

    btn.addEventListener('click', () => {
        console.log('Btn click')
    })
script>