常用鼠标 、键盘事件及事件对象

发布时间:2022-07-03 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了常用鼠标 、键盘事件及事件对象脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

常用鼠标事件:

鼠标事件触发条件
onclilk鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获取鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedowm鼠标按下触发

鼠标事件对象:

鼠标事件对象说明
e.clientX返回鼠标相当于浏览器窗口可视区的x坐标
e.clientY返回鼠标相当于浏览器窗口可视区的y坐标
e.pageX返回鼠标相当于文档页面的x坐标   IE9 +支持
e.pageY返回鼠标相当于文档页面的y坐标   IE9 +支持
e.screenX返回鼠标相当于电脑屏幕的x坐标   
e.screenY返回鼠标相当于电脑屏幕的y坐标   

        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
  

常用键盘事件:

键盘事件触发条件

onkeyup

某个键盘按键被松开时触发
onkeydown某个键盘按键被按下时触发
onkeypress某个键盘按键被按下时触发 但不识别功能键,比如ctrl shift 等
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

键盘事件对象

键盘事件对象属性

说明

keyCode返回该键的ASCII值

使用keyCode属性判断用户按下哪个键

  // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })

脚本宝典总结

以上是脚本宝典为你收集整理的常用鼠标 、键盘事件及事件对象全部内容,希望文章能够帮你解决常用鼠标 、键盘事件及事件对象所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: