JS的事件

什么是事件？

一个事件的组成

=> 触发谁的事件：事件源

=> 触发什么事件：事件类型

=> 触发后做什么：事件处理函数

btn.onclick = function(){}

触发谁的事件 --- btn --- 事件源就是btn

触发什么事件 --- onclick --- 事件类型就是click（为什么不加on，先欠着，后续再解释）

触发后做什么 --- function (){} --- 这个事件的处理函数

常见的事件（了解）

浏览器事件

onload：页面全部资源加载完毕

onscroll：浏览器页面滚动的时候

鼠标事件

键盘事件

表单事件

鼠标事件

<script>
    // 0. 获取元素
    var oDiv = document.querySelector('div')
    // console.log(oDiv)

    // 1.左键单击
    oDiv.onclick = function () {
      console.log('单击元素时触发')
    }

    // 2.双击事件  300ms 内连续点击两次鼠标
    oDiv.ondblclick = function () {
      console.log('双击元素时触发')
    }

    // 3. 右键事件
    oDiv.oncontextmenu = function () {
      console.log('鼠标右键单击时触发')
    }

    // 4.鼠标按下事件  鼠标左键按下的时候触发（哪怕鼠标没有抬起也会触发）
    oDiv.onmousedown = function () {
      console.log('鼠标按下时触发')
    }

    // 5.鼠标抬起事件  鼠标左键抬起的时候触发
    oDiv.onmouseup = function () {
      console.log('鼠标抬起时触发')
    }

    // 6.鼠标移入事件  鼠标移入元素的时候触发   注意：移入子级盒子时，也会触发
    // oDiv.onmouseover = function () {
    //   console.log('onmouseover 移入事件触发')
    // }

    // 7.鼠标移出事件  鼠标移出元素的时候触发   注意：移入子级盒子时，也会触发
    // oDiv.onmouseout = function () {
    //   console.log('onmouseout 移出事件触发')
    // }

    // 8.鼠标移入事件2  鼠标移入元素的时候触发   注意：鼠标移入子级盒子时，并不会触发
    oDiv.onmouseenter = function () {
      console.log('onmouseenter 移入事件触发')
    }

    // 9.鼠标移出事件2   鼠标移出元素时触发   注意：鼠标移出子级盒子时，并不会触发
    oDiv.onmouseleave = function () {
      console.log('onmouseleave 移出事件触发')
    }

    // 10. 鼠标移动事件  鼠标在 oDiv 元素内部移动的时候会触发
    oDiv.onmousemove = function (){
      console.log('鼠标移动事件触发~~~')
    }
</script>

键盘事件

1.document 当前文档

2.input 输入框

<script>
// 1.键盘抬起事件
    // document.onkeyup = function () {
    //   console.log('任意按下一个按键，然后抬起时会触发')
    // }

    // 2.键盘按下事件
    // document.onkeydown = function () {
    //   console.log('键盘任意一个按键被按下')
    // }

    // 3.键盘按下抬起事件
    document.onkeypress = function () {
      console.log('键盘任意按键按下抬起时触发')
    }
  </script>

表单事件

<body>
  <input type="text">
  <script>
    
    // 0. 获取元素
    var inp = document.querySelector('input')

    // 1. 获得焦点事件
    inp.onfocus = function () {
    //   console.log('当前文本框获得焦点')
    }

    // 2.失去焦点事件
    inp.onblur = function () {
    //   console.log('当前文本框失去焦点')
    }

    // 3.文本框内容改变时触发
    inp.onchange = function () {
      console.log('当前文本框内容发生改变')
    }

    // 4.文本框输入内容时触发
    inp.oninput = function () {
      console.log('当前文本框正在输入内容')
    }
  </script>
</body>

JS 的事件

JS的事件

鼠标事件

键盘事件

表单事件