美文网首页
鼠标事件、键盘事件

鼠标事件、键盘事件

作者: 行走的蛋白质 | 来源:发表于2020-06-23 08:47 被阅读0次

    鼠标事件

    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>
    

    相关文章

      网友评论

          本文标题:鼠标事件、键盘事件

          本文链接:https://www.haomeiwen.com/subject/bwrcfktx.html