事件的多种常用类型onclick 触发条件：鼠标按下和松开时鼠标指针在被选元素区域内部 ondblclick 触发条件

onclick 触发条件：鼠标按下和松开时鼠标指针在被选元素区域内部

  <div class="box" ></div>
   <script>
    let box=document.querySelector(".box")
     box.addEventListener("click",function(){//用监听器时不用写on
      console.log(666)
     })
   </script>

ondblclick 触发条件：鼠标第一次按下和第二次松开时鼠标指针在被选元素区域内部并且时间间隔不能太长（双击）

<button class="btn">点我</button>
   <script>
    let btn=document.querySelector(".btn")
     btn.addEventListener("dblclick",function(){//用监听器时不用写on
      console.log('双击啦')
     })
   </script>

onmousedown 触发条件：鼠标在被选元素内按下

<div class="box"></div>
   <script>
    let box=document.querySelector(".box")
     box.addEventListener("mousedown",function(){//用监听器时不用写on
      console.log('按下就可以啦')
     })
   </script>

onmouseup 触发条件：鼠标在被选元素内松开

<div class="box"></div>
   <script>
    let box=document.querySelector(".box")
     box.addEventListener("mouseup",function(){//用监听器时不用写on
      console.log('松开鼠标就打印啦')
     })
   </script>

onmouseover 触发条件：鼠标进入被选元素（从子元素进入，子元素进入父元素，父元素进入子元素都会触发）

 <div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("mouseover", function () { //用监听器时不用写on
      console.log('进入被选区域就打印啦')
    })
  </script>

onmouseenter 触发条件：鼠标进入被选元素（从子元素进入，子元素进入父元素、父元素进入子元素不会触发）

 <div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("mouseenter", function () { //用监听器时不用写on
      console.log('进入被选区域就打印啦')
    })
  </script>

onmouseout 触发条件：鼠标从被选元素出去(从子元素离开，子元素到父元素，父元素到子元素都会触发)

 <div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("mouseout", function () { //用监听器时不用写on
      console.log('离开被选区域就打印啦')
    })
  </script>

onmouseleave 触发条件：鼠标从被选元素出去(从子元素离开会触发，子元素到父元素、父元素到子元素不会触发)

<div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("mouseleave", function () { //用监听器时不用写on
      console.log('离开被选区域就打印啦')
    })
  </script>

onwheel 触发条件：被选区域滚动滑轮（在父元素或者子元素滚动都会触发）

<div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("wheel", function () { //用监听器时不用写on
      console.log('在被选区域滚动滑轮就打印啦')
    })
  </script>

onmousemove 触发条件：在被选区域滚动移动(在父元素或者子元素移动都会触发)

 <div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("mousemove", function () { //用监听器时不用写on
      console.log('在被选区域滚动移动就打印啦')
    })
  </script>

onscroll 触发条件；元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化

  <style>
    .box {
      width: 300px;
      height: 100px;
      background-color: aqua;
      padding: 20px;
      overflow-y: scroll;
    }
    .box1 {
      width: 100px;
      height: 300px;
      background-color: rgb(208, 0, 255);
    }
  </style>
  <div class="box">
    <div class="box1"></div>
  </div>
  <script>
    let box = document.querySelector(".box")
    box.addEventListener("scroll", function () { //用监听器时不用写on
      console.log('元素自己的滚动条滚动啦')
    })
  </script>

onkeydown 触发条件：键盘按下时就触发(不管是那个按键)

 <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("keydown", function () { //用监听器时不用写on
      console.log('键盘按下就打印')
    })
  </script>

13.onkeypress 触发条件：输入框的键盘按下(系统按钮（例如，箭头键和功能键）无法得到识别。)

  <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("keypress", function () { //用监听器时不用写on
      console.log('键盘按下就打印')
    })
  </script>

onkeyup 触发条件：键盘松开时就触发(不管是那个按键)

 <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("keyup", function () { //用监听器时不用写on
      console.log('键盘松开就打印')
    })
  </script>

oninput 触发条件：输入框在输入就触发

 <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("input", function () { //用监听器时不用写on
      console.log('在输入框在输入就打印')
    })
  </script>

onchange 触发条件：失去焦点且value值改变

 <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("change", function () { //用监听器时不用写on
      console.log('失去焦点且value值改变就打印')
    })
  </script>

17. onblur 触发条件：失去焦点,不管value值是否改变

<input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("blur", function () { //用监听器时不用写on
      console.log('失去焦点就打印')
    })
  </script>

onfocus 触发条件：获得焦点,不管value值是否改变

 <input type="text" id="inp">
  <script>
    let inp= document.querySelector("#inp")
    inp.addEventListener("focus", function () { //用监听器时不用写on
      console.log('获得焦点就打印')
    })
  </script>

19.onload 触发条件：浏览器解析完页面之后自动触发，页面全部元素加载完之后才会发生

<body onload="over()">
 
  <script>
  function over(){
    alert('页面已加载完毕')
  }
  </script>
</body>