鼠标事件、键盘事件

鼠标事件

click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件，移入和移出其子元素时也会触发。
mouseout：移出事件，移入和移出其子元素时也会触发。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件。

mouseover 和 mouseenter 都是鼠标移入事件，区别在于 mouseeenter 只触发一次，mouseover 子元素连带触发。
鼠标事件属性：代表鼠标事件发生时是否按下了对应的键盘按键，返回 Boolean 值
MouseEvent.altKey
MouseEvent.ctrlKey
MouseEvent.metaKey
MouseEvent.shiftKey
MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。
0 代表左键
1 代表中键
2 代表右键
MouseEvent.clientX，MouseEvent.clientY
MouseEvent.clientX 属性返回鼠标位置相对于浏览器窗口左上角的水平坐标，
MouseEvent.clientY 属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标，
这两个属性都是只读属性。
MouseEvent.offsetX，MouseEvent.offsetY
MouseEvent.offsetX 属性返回鼠标位置距离事件作用对象左侧边缘的水平距离，
MouseEvent.offsetY 属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，
这两个属性都是只读属性
MouseEvent.movementX，MouseEvent.movementY(了解)
MouseEvent.movementX 属性返回上一个 mousemove 事件与当前 mousemove 事件间的水平位移，
MouseEvent.movementY 属性返回上一个 mousemove 事件与当前 mousemove 事件的垂直距离。
这两个属性都是只读属性。
e.screenX,e,screenY
距离屏幕的水平和垂直距离
鼠标滚轮事件
滚轮事件在火狐浏览器中是DOMMouseScroll，而在其他浏览器中是onmousewheel。
向上下滚就保存到e.detail里面
火狐：e.detail 滴太哦
向上滚动返回值为大于0
向下滚动返回值为小于0
非火狐：e.wheelDelta 带哦特
向上滚动返回值为小于0
向下滚动返回值为大于0

键盘事件

keydown：表示用户按下按键时触发的事件
keyup：表示用户按下按键盘抬起时发生的动作
keypress：表示用户摁下摁键，并且产生一个字符时发生的动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .outer {
        height: 500px;
        width: 500px;
        border: 1px dashed #dfdfdf;
    }
    .inner {
        width: 500px;
        height: 200px;
    }
    .ball {
        transform: translate(100px, 20px);
    }
</style>
<body>

    <div class="outer">
        <div class="inner"></div>
        <button class="ball">ball</button>
    </div>  
    <script>

        const outer = document.getElementsByClassName('outer')[0]
        const inner = document.getElementsByClassName('inner')[0]
        const ball = document.getElementsByClassName('ball')[0]

        outer.onmouseover = function() {
            console.log(this.className, ': mouseover')
        }
        outer.onmouseenter = function() {
            console.log(this.className, ': mouseenter')
        }
        inner.onmouseover = function() {
            console.log(this.className, ': mouseover')
        }
        inner.onmouseenter = function() {
            console.log(this.className, ': mouseenter')
        }

        outer.onclick = function(e) {
            e = e || window.event
                console.log("altKey:"+e.altKey);            //是否按下alt键
                console.log("ctrlKey:"+e.ctrlKey);          //是否按下Ctrl键
                console.log("metaKey:"+e.metaKey);          //是否按下meta键
                console.log("shiftKey:"+e.shiftKey);        //是否按下shift键
        }

        outer.onmousedown = function(e) {
            e = e || window.event
            console.log(e.button)
        }

        ball.onmousedown = function(e) {
            e = e || window.event
            console.log(e.clientX, '----', e.clientY) // 相对可视窗口
            console.log(e.offsetX, '++++', e.offsetY) // 相对目标元素
            console.log(e.pageX, '====', e.pageY) // 相对文档
        }

        document.onkeyup = function(e) {
            e = e || window.event
            if(e.keyCode == 37) {
                console.log('左键')
            } else if(e.keyCode == 38) {
                console.log('上键')
            } else if(e.keyCode == 39) {
                console.log('右键')
            } else if(e.keyCode == 40) {
                console.log('下键')
            }
        }

    </script>
</body>
</html>

最后编辑于：2020.06.24 09:01:54