JavaScript-事件-笔记

1.绑定事件的三种方式
<input type="button" value="按钮1">
<input type="button" value="按钮2" οnclick="alert('按钮2')">
<input type="button" value="按钮3" οnclick="fun1(),fun2()">
<input type="button" value="按钮4">
    
<script>
    /* 
        绑定事件（注册事件）：
            1、传统方式：事件源.事件类型 = 事件处理函数
                 同类型事件，只能绑定一次，绑定多次只认同最后一次
                    
            2、内联方式：在标签中写上事件类型    <标签    事件类型='代码/函数名()'>
                  同类型事件，可以绑定多次      <标签    事件类型='函数名1(),函数名2()'>
                    
            3、事件监听：事件源.addEventListener('事件类型',事件处理函数)
                  注意： 该方式的事件类型不能加on
                  同类型事件，可以绑定多次
    */
    var btn1 = document.querySelectorAll('input')[0]
    // 传统方式绑定事件
    btn1.onclick = function () {
        alert('按钮1')
    }
    btn1.onclick = function () {
        alert('李三')
    }

    //  定义函数fun1
    function fun1() {
        alert('按钮3')
    }
    function fun2() {
        alert('王五')
    }

    //  获取事件源按钮4
    var btn4 = document.querySelectorAll('input')[3]
    //  事件监听 多个绑定事件
    btn4.addEventListener('click', function () {
        alert('按钮4')
    })
    btn4.addEventListener('click', function () {
        alert('赵丽')
    })
</script>

2.传统方式解绑事件
<input type="button" value="按钮1">
<input type="button" value="按钮2">

<script>
    /* 
         传统方式解绑    元素.事件类型 = null    给谁解绑元素就写谁
    */
    
    //  按钮1：点击后弹窗：你好呀      点击按钮2用于给按钮1解绑单击事件，弹出解绑成功(点击按钮1，没反应)

        var btn1 = document.querySelectorAll('input')[0]
        btn1.onclick = function(){
            alert('你好')
        }

        var btn2 = document.querySelectorAll('input')[1]
        btn2.onclick = function(){
            // 给谁解绑就写谁
            btn1.onclick = null
            alert('按钮1解绑成功')
        }

    </script>

3.事件监听方式解绑事件
<input type="button" value="按钮1">
<input type="button" value="按钮2">

<script>
    /* 
        事件监听方式解绑：
            由于事件监听可以绑定多个处理函数，解绑可以解绑其中的一个

            元素.removeEventListener('事件类型',事件处理函数名) 给谁解绑元素就写谁
            
            注意： 解绑需要使用事件函数名，所以在绑定时尽量不使用匿名函数
    */
    
    //  按钮1：点击后弹窗：你好呀      点击按钮2用于给按钮1解绑单击事件，弹出解绑成功(点击按钮1，没反应)
        var btn1 = document.querySelectorAll('input')[0]
        btn1.addEventListener('click',fun1)
        function fun1(){
            alert('你好')
        }

        //  获取按钮2  绑定单击事件
        var btn2 = document.querySelectorAll('input')[1]
        btn2.addEventListener('click',function(){
            //  按钮1解绑单击事件
            btn1.removeEventListener('click',fun1)
            alert('按钮1解绑成功')
        })

    </script>

4.事件解绑案例
 <input type="button" value="按钮1">
 <input type="button" value="按钮2">

 <script>
   /* 
     要求：
         给按钮1绑定两个单击事件；事件1：弹窗你好   事件2弹出hello
         点击按钮2，给按钮1的第一个事件解绑
         也就是说： 解绑前可以弹两个，解绑后点击按钮1只能弹hello
   */
     
     var btn1 = document.querySelectorAll('input')[0]
     var btn2 = document.querySelectorAll('input')[1]
     
     //  btn1绑定两个单击事件： 使用事件监听
     //  由于需要解绑，使用函数名   所以在绑定时不要使用匿名函数
     btn1.addEventListener('click',fun1)
     function fun1(){
         alert('你好')
     }
     btn1.addEventListener('click',fun2)
     function fun2(){
         alert('hello')
     }

     // 点击btn2
     btn2.addEventListener('click',function(){
         // 给按钮1解绑 事件1
         btn1.removeEventListener('click',fun1)
         alert('按钮1的第一个事件解绑成功')
     })
 </script>