复习 JS 点击事件的3种写法

第一种写法 获取dom 触发点击事件

    <div class="textStyle">文字颜色转换</div>
    <button>开关</button>

   <script>
    let but = document.querySelector('button')
    let texts  =document.querySelector('.textStyle')
    let bool = false
    but.onclick = function(){
        bool = !bool
        if(bool){
            texts.style.color = 'greenyellow'
        }else {
            texts.style.color = 'red'
        }
    }

第二种 事件监听

    <div class="textStyle">文字颜色转换</div>
    <button>开关</button>

   <script>
    let but = document.querySelector('button')
    let texts  =document.querySelector('.textStyle')
    let bool = false
    but.addEventListener('click',function(){
        bool = !bool
        if(bool){
            texts.style.color = 'greenyellow'
        }else {
            texts.style.color = 'red'
        }
    })

第三种 内联写法

    <button onclick="btn()">开关</button>

   <script>
    function btn(){
        console.log('====================================');
        console.log('点击事件');
        console.log('====================================');
    }

温故而知新 加油！！！