JavaScript的事件汇总

事件的三要素

1. 事件源
2. 事件类型
3. 事件处理函数

DOM 0级事件绑定 事件源.on + 事件类型 = 事件处理函数
弊端: 无法绑定多个同类型的事件, 后边新写的事件, 会覆盖掉原有的事件

DOM 2级事件绑定(事件监听) 事件源.addEventListener(‘事件类型’, 事件处理函数)
1.

<script>
       oDiv.onclick = function () {  //0级点击事件
       console.log('绑定给 div 的第一个事件')
      }
       oDiv.onclick = function () {
       console.log('绑定给 div 的第二个事件')
</script>
}

<script>
        oDiv.addEventListener('click', function () {  //2级事件绑定(事件监听)
            console.log('绑定给 div 的第一个事件')
        })

        oDiv.addEventListener('click', function () {
            console.log('绑定给 div 的第二个事件')
        })
</script>

2.浏览器事件
window.onload = function () {}

<script>
window.onload = function () {}  //当页面所有资源加载完毕才执行
</script>

3.鼠标事件

<script>
       // JS 的鼠标事件

        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. 鼠标移动事件          鼠标在元素内部移动时触发
        oDiv.onmousemove = function () {
            // console.log('鼠标移动时触发')
        }

        // 9. 鼠标移入事件2
        oDiv.onmouseenter = function () {
            console.log('onmouseenter 鼠标移入事件2')
        }

        // 10. 鼠标移出事件2
        oDiv.onmouseleave = function () {
            console.log('onmouseleave 鼠标移出事件2')
        }

        // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
        // onmouseenter onmouseleave 两个方法 只会在移入元素时触发

</script>

4.键盘事件
键盘事件:document 或者 input
document.on键盘事件的事件类型 = function () {}

<script>
       // 1. 键盘抬起事件
        document.onkeyup = function () {
            console.log('键盘按键抬起')
        }

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

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

5.表单事件

 文本框: <input type="text" id="inp">
    <script>
        // 表单事件
        var inp = document.querySelector('#inp')


        // 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>