事件

• 元素在某种状态(浏览器实现的也叫事件触发)达成时 要执行的提前设定好程序 我们称之为事件句柄
• 事件的三要素三要素: 事件源 事件类型 事件处理程序(handler)
• 事件的绑定方式:
  (1)行内式:标签的属性值是事件触发时的执行代码 同一事件只能绑定一个handler

  <div class="box" onclick="function fn(){console.log(666)} ;fn()"></div>
  <div class="box" onclick="javaScript:console.log(777)"></div>

(2)属性绑定:同一事件只能绑定一个handler

<div class="box"></div>
  <script>
    let box=document.querySelector(".box")
    box.onclick=function() {
      console.log('打印失败')
    }
    box.onclick=function() {//后面这个绑定会覆盖前面的绑定，所以属性绑定只能绑一个
      console.log('打印成功')
    }
  </script>

(3)给元素添加一个事件监听器addEventListener,第一个参数为绑定的事件类型，第二个参数为执行体,可以绑定多个handler，也是最推荐使用的一种

 <div class="box"></div>
  <script>
    let box=document.querySelector(".box")
    // console.log(box);
    box.onclick=function() {
   box.addEventListener("click",function(){
				console.log(111)
			})
			box.addEventListener("click",function(){
				console.log(222)
			})
    }
  </script>

• 事件解绑
  （1）行内式与属性的解绑

<div class="box" onclick="function fn(){ box.onclick=null; console.log(666)} ;fn(); "></div>
   <div class="box1"></div>
   <script>
    let box=document.querySelector(".box")
     let box1=document.querySelector(".box1")
     box1.onclick=function() {
       box1.onclick=null //解绑之后无论点击多少次，都只打印一次
       console.log(777)
     }//运行流程，第一次点击时会将点击事件置为空，并且打印777，第二次点击或更多次时，因为已经置空所以什么都不打印
   </script>

(2)移除对应的元素的对应的监听程序 removeEventListener

 <div class="box"></div>
   <script>
     let box=document.querySelector(".box")
     function fn1 () {
				console.log("1111")
			}
			function fn2 () {
				console.log("2222")
			}
			function fn3 () {
				console.log("333")
			}
		   box.addEventListener("click",fn1)
		   box.addEventListener("click",fn2)
		   box.ddEventListener("click",fn3)		   
		   box.removeEventListener("click",fn1) //将第一个监听器移除
   </script>