js事件

1. 什么是事件? 一个事件的组成：

• 触发谁的事件: 事件源
• 触发什么事件: 事件类型
• 触发后做什么: 事件处理函数 btn.onclick = function () {} 分析：
• 触发谁的事件 -> btn -> 事件源就是 btn
• 触发什么事件 -> onclick -> 事件类型就是 click
• 触发后做什么事 -> function () {} -> 这个事件的处理函数

2. 常见的事件(了解)

• 浏览器事件
  • onload: 页面全部资源加载完毕
  • onscroll: 浏览器页面滚动的时候
• 鼠标事件
• 键盘事件
• 表单事件

1. 鼠标事件

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

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

// 0. 获取元素
var oDiv = document.querySelector('div')

// 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('鼠标移动事件触发~~~')
}

2. 键盘事件

键盘事件

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

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

// 2. 键盘按下事件
document.onkeydown = function