美文网首页
js 键盘事件

js 键盘事件

作者: 一只章鱼哥 | 来源:发表于2021-01-24 19:57 被阅读0次

1.键盘事件

onkeyup 某个键盘按键被松开时触发

onkeydown 某个键盘按键被按下时触发

onkeypress 某个键盘按键被按下时 触发但是它不识别功能键 比如 ctrl shift 箭头等

案例:

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

2.键盘事件对象

键盘事件对象属性:keyCode

说明: 返回改建的ASCII值(美国信息交换标准代码)

注意:

keydown 和keyup 不区字母大小写, keypress区分大小写

在实际开发种,更多的使用 keydown 和keyup , 它能识别所有的键(包括功能键)

keypress 不能识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值。

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

e 就是事件对象 (event 或者 evt)

<script>
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            if (e.keyCode === 65) {
                alert('您按下的a键');
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

相关文章

  • js操作页面三步骤

    js操作页面三步骤 js事件 鼠标事件 文档事件 键盘事件 表单事件 事件对象 js操作内容 js操作样式 页面转...

  • 事件

    1、鼠标的移入移除js部分 2、鼠标事件js部分 3、事件对象js部分 4、键盘事件js部分 5、输入框事件js部...

  • JS事件—键盘事件

    键盘事件的种类 键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件,它们都继承...

  • JS事件相关基础

    js事件: 键盘事件: JS中的事件冒泡和事件捕获: 1、事件冒泡。如下代码: 点击button事件,连同父元素绑...

  • js事件 事件冒泡

    js事件的分类 事件的类型:有鼠标事件,键盘事件,HTML事件,变化事件 注意:js中的事件前面要加on(如:on...

  • 2019-01-11 input框事件,jQuery其他事件,自

    js事件的分类事件的类型:有鼠标事件,键盘事件,HTML事件,变化事件注意:js中的事件前面要加on (如:onc...

  • input框事件,jQuery其他事件,自定义事件,事件冒泡,事

    js事件的分类事件的类型:有鼠标事件,键盘事件,HTML事件,变化事件注意:js中的事件前面要加on (如:onc...

  • JS键盘事件

    键盘事件小结 http://jsbin.com/putijesevi/edit?html,js,console,o...

  • JS键盘事件

    键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结...

  • js 键盘事件

    1.键盘事件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeyp...

网友评论

      本文标题:js 键盘事件

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