键盘事件

千次阅读 2019-01-21 13:28:08

键盘事件 键盘事件主要有三个：keydown、keypress、keyup。触发顺序分别是keydown、keypress、keyup。 document.onkeydown = function (e) { console.log(‘keydown’); } document.onkeypress = function (e) ...

键盘事件
键盘事件主要有三个：keydown、keypress、keyup。
触发顺序分别是keydown、keypress、keyup。
  document.onkeydown = function (e) {
      console.log(‘keydown’);
  }
  document.onkeypress = function (e) {
      console.log(‘keypress’);
  }
  document.onkeyup = function (e) {
      console.log(‘keyup’);
  }

输出的结果是keydown、keypress、keyup。
keydown和keypress可以响应连续操作，我们一直按着键盘就会一直触发事件。
keypress的范围和keydown有所区别：
keydown可以响应任意键盘按键，keypress只能响应字符类按键，也就是有ASCII码的字符的按键，像字母数字回车空格之类的。
事件对象的属性方面：
只有keypress有charCode属性，这个属性代表的我们输入的这个字符的ASCII码，配合SHIFT之类的按键可以直接获取大写字母等。
keyCode和which每个方法都有，表示的是这个键的唯一标示，可以告诉浏览器我们按下的是键盘上的哪一个键，比如空格是32，32就代表空格。不过我们一般都用which，keyCode用的较少。
• String上有一个方法叫做fromCharCode，可以接受一个Unicode值（包含ASCII值），然后返回对应的字符串，我们可以配合这个方法和charCode来直接获取输入的字符。
 document.onkeypress = function (e) {
     console.log(String.fromCharCode(e.charCode));
  }

窗体操作类（window上的事件）
load事件
这个事件window.onload和在body标签上写onload是一样的效果，作用是等页面中所有的东西都下载完成再执行里面的代码。
scroll事件
这个方法是监听滚轮滚动的事件，我们可以用这个事件来写一个兼容版的fix定位。
 function beFixed(ele){
      var initPosX = ele.getPosition().w,
          initPosY = ele.getPosition().h;
      addEvent(window, ‘scroll’, function(e){
          ele.style.top =  initPosY + getScrollOffset().h + ‘px’;
          ele.style.left =  initPosX + getScrollOffset().w + ‘px’;
      })
  }

收起

展开全文

js 键盘事件

万次阅读 2020-07-27 21:04:18

键盘事件：简单点就是检测用户在键盘上按了什么键 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=...

键盘事件：简单点就是检测用户在键盘上按了什么键

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                window.document.onkeydown = keyHandler;
                keyHandler();
            })

            function keyHandler() {
                if(event.keyCode == 13) {//回车
                    alert("你按了回车哦！");
                }else{
                    alert("听话，不要调皮！");
                }
            }
        </script>
	</head>

    <body>
        点击键盘上的回车试试？
    </body>

</html>

收起

展开全文

Js-三大事件（鼠标事件、键盘事件、html事件）

万次阅读 多人点赞 2017-08-23 19:01:44

鼠标事件、键盘事件、html事件

鼠标事件
click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseover：鼠标悬浮
mouseout：鼠标离开
mousemove：鼠标移动
mouseenter：鼠标进入
mouseleave：鼠标离开
<button οnclick="myClick()">鼠标单击</button>
<button οndblclick="myDBClick()">鼠标双击</button>
<button οnmοusedοwn="myMouseDown()" οnmοuseup="myMouseUp()">鼠标按下和抬起</button>
<button οnmοuseοver="myMouseOver()" οnmοuseοut="myMouseOut()">鼠标悬浮和离开</button>
<button οnmοusemοve="myMouseMove()">鼠标移动</button>
<button οnmοuseenter="myMouseEnter()" οnmοuseleave="myMouseLeave()">鼠标进入和离开</button>
<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }
键盘事件
keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
<body>
<input id="name" type="text" οnkeydοwn="myKeyDown(this.id)" οnkeyup="myKeyUp(this.id)">
</body>
<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>
HTML事件
load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动
<body οnlοad="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" οnselect="mySelect(this.id)">
<input type="text" id="name2" οnchange="myChange(this.id)">
<input type="text" id="name3" οnfοcus="myFocus()">
</body>
<script>
    window.onload = function () {
        console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
     alert("文档被关闭！");
     };*/
    /*打印选中的文本*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*内容被改变时*/
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*得到光标*/
    function myFocus() {
        console.log("得到光标！");
    }
    /*窗口尺寸变化*/
    window.onresize = function () {
        console.log("窗口变化！")
    };
    /*滚动条移动*/
    window.onscroll = function () {
        console.log("滚动");
    }
</script>
事件模型：
<body>
<!--脚本模型：行内绑定-->
<button οnclick="alert('hello')">hello</button>
<!--内联模型-->
<button οnclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>
<script>
    function showHello() {
        alert("hello");
    }
    /*DOM0：同一个元素只能添加一个同类事件
     * 如果添加多个，后面的会把前面的覆盖掉*/
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("hello");
    };
    btn.onclick = function () {
        alert("hello world");
    };
    /*DOM2:可以给一个元素添加多个同类事件*/
    btn.addEventListener("click", function () {
        alert("hello1");
    });
    btn.addEventListener("click", function () {
        alert("hello2");
    });
    /*不同浏览器的兼容写法*/
    /*IE*/
    if (btn.attachEvent) {
        btn.attachEvent("onclick", function () {
            alert("hello3");
        });
    /*W3C*/
    } else {
        btn.addEventListener("click", function () {
            alert("hello4");
        })
    }
</script>
事件冒泡与事件捕获：
 <style>
        #div1{
            width: 400px;
            height: 400px;
            background-color: #0dfaff;
        }
        #div2{
            width: 300px;
            height: 300px;
            background-color: #33ff66;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: #fff24a;
        }
        #div4{
            width: 100px;
            height: 100px;
            background-color: #ff4968;
        }
    </style>
 <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>
</body>
<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div4");
    },false);
</script>
阻止默认事件：
<body>
<a href="http://www.baidu.com" οnclick="stop(event)">百度</a>
</body>
<script>
    function stop(event) {
        if (event.preventDefault()) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        alert("不跳转！")
    }
</script>

收起

展开全文

javascript

JavaScript回车事件等键盘事件

2020-07-09 21:31:09

JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表 JavaScript键盘事件在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3...


JavaScript回车事件等键盘事件
JavaScript键盘事件
键盘事件属性
键盘响应顺序
JavaScript 监听回车事件
Keycode对照表

JavaScript键盘事件
在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：

1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会禁止keypress 事件响应）。

2）keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。

3）keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
当用户正按下键码时，可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件，它们的表现也完全一致，不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件，但键盘事件多被应用在表单输入中。
键盘事件属性
键盘定义了很多属性，如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中，但是 ctrlKey 和 shiftKey 属性除外，因为它们可以在鼠标事件中存在。例如，当按下 Ctrl 或Shift 键时单击鼠标操作。



ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中，表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下，且鼠标单击某个页面元素，则会把该元素从页面中删除。
document.onclick = function (e) {
	//标准化事件对象
    var e = e || window.event;  
    //获取发生事件的元素，兼容IE和DOM
    var t = e.target || e.srcElement;  
    //如果同时按下Ctrl和Shift键
    if (e.ctrlKey && e.shiftKey) {  
    	//移出当前元素
        t.parentNode.removeChild(t);  
    }
}

keyCode 和 charCode 属性使用比较复杂，但是它们在实际开发中又比较常用，故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的，如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。



某些键的可用性不是很正确，如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的，如下表所示：


键盘响应顺序
当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

对于字符键来说，键盘事件的响应顺序：keydown → keypress → keyup。

对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown → keyup。

如果按下字符键不放，则 keydown 和 keypress 事件将逐个持续发生，直至松开按键。

如果按下非字符键不放，则只有 keydown 事件持续发生，直至松开按键。
JavaScript 监听回车事件
某些时候我们需要监听回车按键从而实现某些功能，例如回车键登录等。
$("#loginListen").bind("keydown", function (e) {
	//兼容浏览器的事件
    let theEvent = e || window.event;
    //兼容各浏览器的键盘事件
    let keyCode = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (keyCode == 13) {
        console.log("回车执行");
        $("#loginOp").click();
        //当然也可以禁止回车事件
        //theEvent.keyCode = 0;
        //theEvent.returnValue = false;
    }
})

a） $("#loginListen") 表示获取id为loginListen的标签元素，这是jQuery的写法，所以在使用时项目中需要先安装jQuery。

b） bind(“keydown”, function (e)｛…｝）,表示绑定keydown事件。

c） keyCode == 13表示回车事件。

d） $("#loginOp").click();表示id为loginOp的标签点击事件，这个标签一般来说为按钮。
Keycode对照表








参考：JS键盘事件

收起

展开全文

javascript vue.js 前端

Java键盘事件
千次阅读 2018-02-06 16:53:06
键盘事件的事件源一般丐组件相关，当一个组件处于激活状态时，按下、释放或敲击键盘上的某个键时就会发生键盘事件。键盘事件的接口是KeyListener，注册键盘事件监视器的方法是addKeyListener(监视器)。实现...
收起
java 键盘事件
千次阅读 2015-09-23 22:48:52
package 键盘事件; public class Main { public static void main(String[] args) { // TODO Auto-generated method stub KeyEvent1 win=new KeyEvent1(); win.setTitle("键盘事件"); } } package 键盘...
收起
java
JQuery键盘事件
千次阅读 2019-03-31 17:48:38
《JQuery键盘事件》开发工具与关键技术：前端 && 谷歌浏览器作者：肖春庆撰写时间：2019年02月15日 JQuery提供了对应键盘事件keydown事件,keyup事件和keyprees事件。一、keydown事件：当按下键盘按钮时...
收起
键盘事件处理
2018-12-12 19:22:49
目前，对键盘事件的支持主要遵循的是 DOM0级。按键相关事件键盘操作涉及下面三种事件： keydown：当用户按下键盘上的任意键时触发，而且如果按住按住不放的话，会重复触发此事件。 keypress：当用户按下键盘上的...
收起
请问大佬们，如何局部监听键盘事件，比如只监听Dialog 对话框里的键盘事件
2020-01-09 08:51:50
请问大佬们，如何局部监听键盘事件，比如只监听Dialog 对话框里的键盘事件
收起
javascript jquery vue.js
键盘事件详解
2017-09-23 19:45:07
什么是键盘事件键盘事件是指用户按下键盘的时所触发的事件，包括两种，键盘按下触发 onkeydown，以及键盘抬起时触发事件onkeyup。在绑定键盘事件事件时所用的方法与鼠标事件基本类似，可以用匿名函数的方法使用也...
收起
对象
jQuery键盘事件
2019-06-09 20:39:38
jQuery键盘事件在鼠标中有mousedown和mouseup之类的事件，都是根据我们所需的要求而触发。键盘的按下与弹起，对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听。 Keydown事件：当在一个元素第一次...
收起
C# 键盘事件
2017-02-09 15:47:01
键盘事件 三种键盘事件处理 KeyPress 按下按键并松开 KeyDown 按下按键 KeyUp 松开按键 键盘事件跟鼠标事件一样，也有两种键盘处理参数： KeyEventArgs KeyPressEventArgs 可以使用e....
收起
Java GUI 键盘事件
万次阅读 多人点赞 2019-08-13 19:29:56
import java.awt.FlowLayout; import java.awt.Frame; import java.awt.TextField; import java.awt.event.KeyAdapter; import java.awt.event....public class Java键盘事件 { public static void main(String...
收起
Java GUI
JAVA JTable 自定义CellEditor中定义了键盘事件，输入时确不响应键盘事件?
2018-10-17 16:18:41
但在我在表格中输入的时候，使用鼠标点击单格后再输入值，可以正常响应键盘事件，但是用键盘选中该单元格后再输入值时，可以输入任意字符，键盘事件不被触发，定义的输入规则无用。请教高手，如何解决这个问题。
收起
java jtable
Qt 鼠标事件，键盘事件
千次阅读 2016-11-23 20:33:17
Qt鼠标事件 Qt键盘事件 Qt事件处理
收起
Qt事件处理
jQuery键盘事件，绑定事件与移除事件，复合事件
千次阅读 2018-11-17 18:28:13
键盘事件是指每次按下或者释放键盘上得按键时所产生的事件，常用的键盘事件的方法： keydown() :按下键盘时触发的事件方法； keyup() :释放按键时触发的事件方法； keypress() :产生可打印的字符时触发的事件...
收起
JavaFX键盘事件
千次阅读 2019-03-28 23:54:27
一、键盘事件 KeyPressed 按键按压 KeyReleased 按键释放 KeyTyped 按键类型二、用法 node.setOnXX(event->{ //do something }); node.addEventFilter(KeyEvent.XX, event -> { //do something ...
收起
JavaScript 事件之键盘事件
2016-06-02 22:04:54
键盘事件包含onkeypress、onkeydown 和 onkeyup。 onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作； onkeydown事件是在键盘上的某个键被按下时触发此事件的...
收起
VTK鼠标键盘事件
千次阅读 2019-04-30 10:32:28
VTK鼠标键盘事件会优先于QT的鼠标键盘事件，而且会吃掉这些事件，使得QT的 //void mouseMoveEvent(QMouseEvent * event) override; 这种事件得不到执行。这主要是通过QVTKOpenGLWidget类来实现的。所以我们...
收起
react添加监听事件监听键盘事件
千次阅读 2019-06-21 17:26:26
1，react添加监听事件监听键盘事件 参考：记录下确认框confirm代码：
收起
QT 之键盘事件（捕获键盘按下、松开事件）
万次阅读 2018-04-17 15:16:56
我们在做软件时候，经常会碰到这样的...查阅文档，QT已经实现了这一系列的键盘事件void QWidget::keyPressEvent(QKeyEvent *event) //键盘按下事件 void QWidget::keyReleaseEvent(QKeyEvent *event) //键盘松开事件...
收起
QT
JavaScript 键盘事件
千次阅读 2016-12-14 20:09:52
JavaScript 键盘事件有以下3种 keydown 键盘按键按下（如果按着不放，会持续触发该事件） keypress 键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件）。 keyup 键盘按键弹起。全局事件...
收起
javascript
嵌入式linux 键盘事件
2018-05-02 07:06:55
嵌入式arm板子插入USB键盘，自动产生/dev/input/event4节点，键盘按键event4有输出，但是系统应用程序相应不到按键。该怎么把event的键盘事件 上报给系统层？怎么办啊。
收起
linux 嵌入式
js 键盘事件及其他事件
2018-07-22 20:16:02
常用的键盘事件 。 onkeydown 某个键盘按键被按下。 onnkeyup 某个键盘的按键被松开。onkeypress 某个键盘的按键被按下并松开。 onkeydown与onkeypress的区别。一个放开一个没有放开 onkeydown先于...
收起
Java Swing 键盘事件监听
千次阅读 2019-09-16 10:30:30
Java Swing 键盘事件监听开发工具与关键技术：java、 elipse2019、jdk1.8 作者：Amewin 撰写时间：2019年9月16日 键盘事件的事件源一般丐组件相关，当一个组件处于激活状态时，按下、释放或敲击键盘上的某个键时...
收起
【JavaScript 教程】事件——键盘事件
千次阅读 2019-06-29 17:55:45
作者 | 阮一峰键盘事件的种类键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。keyd...
收起

键盘事件

js 键盘事件

Js-三大事件（鼠标事件、键盘事件、html事件）

JavaScript回车事件等键盘事件

JavaScript回车事件等键盘事件

JavaScript键盘事件

键盘事件属性

键盘响应顺序

JavaScript 监听回车事件

Keycode对照表

Java键盘事件

java 键盘事件

JQuery键盘事件

键盘事件处理

请问大佬们，如何局部监听键盘事件，比如只监听Dialog 对话框里的键盘事件

键盘事件详解

jQuery键盘事件

C# 键盘事件

Java GUI 键盘事件

JAVA JTable 自定义CellEditor中定义了键盘事件，输入时确不响应键盘事件?

Qt 鼠标事件，键盘事件

jQuery键盘事件，绑定事件与移除事件，复合事件

JavaFX键盘事件

JavaScript 事件之键盘事件

VTK鼠标键盘事件

react添加监听事件监听键盘事件

QT 之键盘事件（捕获键盘按下、松开事件）

JavaScript 键盘事件

嵌入式linux 键盘事件

js 键盘事件及其他事件

Java Swing 键盘事件监听

【JavaScript 教程】事件——键盘事件

键盘事件

第三方SDK集成库，授权/分享/支付

Deque

综合素质测评最全，包括智*，北*，百*

java并发编程之线程与进程

没有文化适合自媒体创业吗

你想通过创业赚取人生中的第一桶金

吹响集结号的银商.doc

如何正确使用指标判断主力出货

Python+Django+Mysql的多app后端开发入门

OPPO A83（MT6763）原厂原理图维修图（PDF格式）

【数据分析-随到随学】数据分析建模和预测

C#文件传输、Socket通信、大文件断点续传

ACM模板和一些题目的代码实现

（新）备战2021软考网络规划设计师终极解密套餐

LeetCode322零钱兑换(dp)

JavaWeb学习之JSP学习

Love-Ethereum区块链学习

小白自学Photoshop美工人像抠图平面设计全套教程

微服务系列第七十一季-Spring入门

高人，不断地在营销， 有收入就是高人

综合素质测评最全，包括智，北，百*

高人，不断地在营销，有收入就是高人