关于javaScript原⽣的绑定事件⽅式

  <!-- 第一种 行内绑定 -->
    <!-- <button onclick="alert(1)">haha</button> -->

    <!-- 第二种： 获取元素点击 -->
    <!-- <button>haha</button>
    <script>
        document.querySelector('button').onclick = function(){
            console.log('haha')
        }
    </script> -->

    <!-- 第三种: 添加事件监听-->
    <!-- <button>haha</button>
    <script>
        document.querySelector('button').addEventListener('click',function(){
            console.log('haha')
        })
    </script> -->


    <!-- 事件传播流程 -->
    <div class="box1">
        <div class="box2">
            <div class="box3">

            </div>
        </div>
    </div>

    <script>

        window.addEventListener('click',()=>{
            console.log('window--捕获')
        },true)

        window.addEventListener('click',()=>{
                console.log('window--冒泡')
        },false)

        document.addEventListener('click',()=>{
            console.log('document--捕获')
        },true)

        document.addEventListener('click',()=>{
                console.log('document--冒泡')
        },false)

        document.querySelector('.box1').addEventListener('click',()=>{
            console.log('box1--捕获')
        },true)

        document.querySelector('.box1').addEventListener('click',()=>{
                console.log('box1--冒泡')
        },false)  


        document.querySelector('.box2').addEventListener('click',()=>{
            console.log('box2--捕获')
        },true)

        document.querySelector('.box2').addEventListener('click',()=>{
                console.log('box2--冒泡')
        },false)        

        // addEventListener(事件,点击处理的函数,捕获或者冒泡)
        document.querySelector('.box3').addEventListener('click',()=>{
            console.log('box3--捕获')
        },true)

        document.querySelector('.box3').addEventListener('click',()=>{
            console.log('box3--冒泡')
        },false)

        
        document.querySelector('.box3').removeEventListener('click')