事件绑定和解绑

行内式的几种绑定方式:

    <div class="box">
        hello
    </div>
    <!-- 行内式几种方式 -->
    <div class="box" onclick="javaScript:console.log(666)"></div>
    <div class="box" onclick="javaScript:myconsole.mylog()"></div>
    <!--直接调用-->
    <div class="box" onclick="myconsole.mylog();fn()"></div> //调用了两个
    <div id="xiake" onclick="console.log('下课')"></div>





 var box =document.querySelector(".box")
         box.onclick=function(){//属性绑定
            box.innerHTML="<big>你装备掉了<big>"
         }

         var myconsole={
            mylog:()=>{console.log("我自己写的函数");

            }
         }
         fn=()=>{
            console.log(123);
         }

事件 ：元素再某种状态达成时要执行的提前设定好的程序  我们称之为事件句柄

三要素：事件源  事件类型  监听程序(事件处理程序 handler)

 事件的绑定方式

        只能绑定一个处理程序:函数帮两个会覆盖

        行内式:标签的属性值事件触发时是代码

        属性绑定:可以用分号隔开调用两个

        重点:尽量使用一种

行内和属性解绑   使οnclick=null

 

        var box1=document.querySelector(".box")
        box1.onclick=function(){
            box1.onclick=null //属性解绑  只能点一次
            console.log(6666);
                       
        }
        function fn(){
            xiake.onclick=null
        }
        // 2.
        var xiake=document.querySelector("#xiake")
        xiake.addEventListener("click",fn)//行内式解绑