【JavaScript ：语法】使用JS监听键盘按下事件（keydown event）

最新推荐文章于 2024-04-15 14:49:12 发布
最新推荐文章于 2024-04-15 14:49:12 发布
阅读量3.8k 收藏 10
点赞数 2
分类专栏： javaScript grammar

转载：

使用JS监听键盘按下事件（keydown event）

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

JavaScript HTML DOM 事件  

================================================================================

一、鼠标事件：

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="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" onkeydown="myKeyDown(this.id)" onkeyup="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 onload="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" onselect="mySelect(this.id)">
<input type="text" id="name2" onchange="myChange(this.id)">
<input type="text" id="name3" onfocus="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 onclick="alert('hello')">hello</button>
<!--内联模型-->
<button onclick="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" onclick="stop(event)">百度</a>
</body>

<script>
    function stop(event) {
        if (event.preventDefault()) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        alert("不跳转！")
    }
</script>

 

=======================================================================

1、监听全局键盘按下事件，例如监听全局回车事件

$(document).keydown(function(event){
(event.keyCode == 13alert('你按下了Enter'); 
});

 2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件

$("#btn").keydown(function(event){
(event.keyCode == 13alert('你按下了Enter'); 
});

 3、如果是要监听组合键，例如监听ctrl+c

$(document).keyup(function(event){ 
 (event.ctrlKey && event.keyCode === 67alert('你按下了CTRL+C'});

 4、详细keyCode值列表

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

天有行-地无迹-千秋怎堪一剑扫
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JS监听键盘按下事件（keydown event）
卷NM呢！不干了！
09-07 3309
1、监听全局键盘按下事件，例如监听全局回车事件 　　$(document).keydown(function(event){ 　　　　if(event.keyCode == 13){ 　　　　　　alert('你按下了Enter'); 　　　　} 　　}); 2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件 　　$("#btn").keydown(function(event){ 　　　　if(event.keyCode == 13){ 　　　　　　alert('你按下
enter键控制input光标移动到下一个框
10-24
enter键控制input光标移动，通过判断是否是最后一个input输入框来决定是继续向下跳还是跳到第一个input输入框
VUE实现监听键盘事件，用户按下多键触发方法
最新发布
weixin_49682182的博客
04-15 255
VUE实现监听键盘事件，用户按下多键触发方法。
JS键盘监听事件：onkeydown、onkeypress、onkeyup
Xlling的博客
11-16 2614
1、都是监听键盘的行为，但是触发的时机不一样 onkeydown: 按下任意按键的时候触发的，onkeydown 触发的时候输入流正要进入系统，也就是说onkeydown事件一完，输入流就进入了系统，无法改变。所以通过onkeydown事件可以改变用户是按了哪个键； onkeypress: 按下并放开任何字母数字键时触发的，onkeypress事件是在输入流进入系统后触发的，但输入流暂未被系统处...
JS中监听键盘操作，onkeyup / onkeydown绑定，event.keyCode，常用KeyCode大全
Rudon滨海渔村的博客
04-21 6510
区别 onkeydown 当用户按下键盘按键时触发。 onkeyup 当用户释放键盘按键时触发。 onkeypress 当键盘按键被按下并释放一个键时发生。 onchange 当对象或选中区的内容改变时触发。 jQuery绑定左右方向键事件 $(document).keydown(function(event){ var e = event || window.eve...
js监听键盘事件的方法_原生和jquery的区别详解
10-21
这篇文章主要讨论了两种常见的监听键盘事件的方法：原生JavaScript和jQuery库的使用。 首先，我们来看原生JavaScript如何监听键盘事件。原生JS提供了三个与键盘事件相关的事件处理器： 1. `onkeydown`：当用户按下...
Garuda-Javascript-Syntax:语法Garuda Javascript的屏幕截图
04-30
Javascript-语法屏幕截图由Carbon（ ）进行专辑1个Basic.png2鹰航Component.png3 Ajax.png4 Single Data.png5 Multiple Data.png6 Input Focus Value.png7 Button Event.png8预览Image.png9从URL.png加载图像10鼠标...
2.01 JavaScript基础事件以及Event对象（原生态）.pdf
10-27
Keyboard 事件是指跟踪键盘的输入事件，如 keydown、keyup、keypress 等。 #### touch 事件 Touch 事件是指跟踪触摸屏的触摸事件，如 touchstart、touchmove、touchend 等。 本文详细介绍了 JavaScript 中的基础...
jQuery键盘按键按钮响应事件代码
06-10
本主题聚焦于"jQuery键盘按键按钮响应事件代码"，这是一个功能，使得用户在键盘上按下按键时，能够触发与点击按钮相同的行为。 首先，我们需要了解jQuery中的事件处理函数。在jQuery中，`$(document).ready()` 是一...
jQuery键盘按钮响应事件特效代码
03-20
在本案例中，我们关注的是"jQuery键盘按钮响应事件特效代码"，这涉及到如何利用jQuery监听键盘事件并实现与点击按钮相同的效果。 首先，让我们深入理解jQuery中的事件处理。在JavaScript中，事件是用户与页面交互时...
知识笔记（八十七）———【JavaScript】事件监听：键盘事件
lrx276的博客
01-19 596
1.监听用户的实时输入：可以通过监听keypress事件来获取用户实时输入的内容，并进行处理。1．捕获用户的键盘释放操作：可以通过监听keyup事件来捕获用户释放的键，并执行相应的操作。当用户在搜索框中输入内容时，每次输入都会触发input事件，并可以通过获取输入框的值进行搜索操作，并实时显示搜索结果。1.捕获用户的按键操作：可以通过监听keydown事件来捕获用户按下的键，并执行相应的操作。例如，可以监听keyup事件，检测用户在输入框中释放键后的输入内容，并进行输入合法性检查或实时搜索等操作。
通过select较高效的捕获和处理鼠标键盘事件
借你一秒
04-18 2847
select监听这些文件描述符的状态，若有一个发生变化则返回，否则阻塞。#include #include #include #include #include #include #include #include int main(int argc,char **argv) { int fd
js捕捉按下和抬起键盘操作，持续按下不重复执行
qq_35035975的博客
01-15 976
<script> export default { data() { return { keyboardControl:false,//键盘是否已按下 } }, created(){ var _self = this; //键盘按下 document.onkeydown = function(e){
WPF 回车触发按钮事件，回车光标后移
weixin_44858501的博客
09-12 1701
# WPF 回车触发按钮事件，回车光标后移
JS跟踪用户keyDown事件，实现点击单选，Ctrl多选效果
SunFlower914的博客
04-19 1873
JS跟踪用户keyDown事件，鼠标点击tag标签后高亮显示，按下Ctrl键单击实现多选，在选中情况下再次单击后取消选择
js的keydown对应按键及其简单使用方法
suger_yeezy的博客
04-18 7420
js 里面的键盘事件经常用到，所以收集了键盘事件对应的键码来分享下： keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter keyCode 16 = Shift_L keyCode 17 = Control_L keyCode 18 = Alt_L keyCode 19 =...
js监听鼠标拖动事件(按住左键拖动触发，松开左键取消)
weixin_38008837的博客
09-30 8176
此段代码，实现了左键点击id元素内区域后，拖动鼠标到边缘区域滚动条(内部class元素的滚动条)自动滚动，松开鼠标后取消事件 业务需要记录一下 $(function () { var div=document.getElementById("元素id"); div.onmousedown=function(e){ document.onmousemove=function(e){ var xx=e.c...
js+监听键盘按下事件
02-02
在JavaScript中，可以通过监听键盘按下事件来实现对键盘输入的响应。以下是一种常见的实现方式： 1. 首先，需要获取要监听的元素，可以是整个文档或特定的元素。例如，可以使用`document`对象来监听整个文档的键盘按下事件，或者使用`getElementById`等方法获取特定元素。 2. 接下来，使用`addEventListener`方法来添加键盘按下事件的监听器。该方法接受两个参数：要监听的事件类型（这里是`keydown`）和事件处理函数。 3. 在事件处理函数中，可以通过`event`参数来获取触发事件的相关信息，如按下的键码、按下的键值等。 下面是一个简单的示例代码： ```javascript // 获取要监听的元素 var element = document; // 添加键盘按下事件的监听器 element.addEventListener("keydown", function(event) { // 获取按下的键码 var keyCode = event.keyCode || event.which; // 执行相应的操作 console.log("按下了键码为 " + keyCode + " 的键"); }); ``` 在上述示例中，我们通过`console.log`语句将按下的键码输出到控制台。你可以根据需要在事件处理函数中执行其他操作，比如触发其他函数、修改页面内容等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值