JS事件(常见)

JS事件

一.事件的组成:

• 由三部分组成:
  • => 触发谁的事件: 事件源
  • => 触发什么事件: 事件类型
  • => 触发后做什么: 事件处理函数

二.鼠标事件

• 1.左键点击

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

• 2.双击事件

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