1.JS 的事件

什么是事件?

• 一个事件的组成

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

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

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

    btn.onclick = function () {}

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

发什么事件 -> onclick -> 事件类型就是 click

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

常见的事件(了解)

浏览器事件

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

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

鼠标事件

键盘事件

表单事件

2.鼠标事件

样式代码

  <style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .sBox {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

body代码

    <div>
        <div class="sBox"></div>
    </div>

2.0 获取元素

    var oDiv = document.querySelector('div')

2.1 左键单击

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

2.2 双击事件 300ms 内连续点击两次鼠标

    oDiv.ondblclick = function () {
        console.log('双击元素时触发')
    }

2.3 右键事件

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

2.4 鼠标按下事件 鼠标左键按下的时候触发(哪怕鼠标没有抬起也会触发)

    oDiv.onmousedown = function () {
        console.log('鼠标按下时触发')
    }
    }

2.5 鼠标抬起事件 鼠标左键抬起的时候触发

    oDiv.onmouseup = function () {
        console.log('鼠标抬起时触发')
    }

2.6 鼠标移入事件 鼠标移入元素的时候触发

注意: 移入子级盒子时, 也会触发

    oDiv.onmouseover = function () {
        console.log('onmouseover 移入事件触发')
    }

2.7 鼠标移出事件 鼠标移出元素的时候触发

注意: 移入子级盒子, 也会触发

    oDiv.onmouseout = function () {
        console.log('onmouseout 移出事件触发')
    }

2.8 鼠标移入事件2 鼠标移入元素的时候触发

注意: 移入子级盒子时, 并不会触发

    oDiv.onmouseenter = function () {
        console.log('onmouseenter 移入事件触发')
    }

2.9 鼠标移出事件2 鼠标移出元素的时候触发

注意: 移出鼠标到子盒子时并不会触发

    oDiv.onmouseleave = function () {
        console.log('onmouseleave 移出事件触发')
    }

2.10 鼠标移动事件 鼠标在 oDiv 元素内部 移动的时候会触发

    oDiv.onmousemove = function () {
        console.log('鼠标移动事件触发~~~')
    }

3.键盘事件

1. document 当前文档
2. input 输入框

3.1 键盘抬起事件

    document.onkeyup = function () {
        // console.log('任意按下一个按键然后抬起时会触发')
    }

3.2 键盘按下事件

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

3.3 键盘按下抬起事件

    document.onkeypress = function () {
        console.log('键盘任意按键按下抬起时触发')
    }

4.表单事件

body代码

    <input type="text">

4.0 获取元素

    var inp = document.querySelector('input')

4.1 获得焦点事件

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

4.2 失去焦点事件

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

4.3 文本框内容改变时触发

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

4.4 文本框输入内容时触发

    inp.oninput = function () {
        console.log('当前文本框正在输入内容')
    }