Event事件对象之鼠标_键盘事件对象

最新推荐文章于 2024-07-22 09:19:24 发布
最新推荐文章于 2024-07-22 09:19:24 发布
阅读量901 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 对象 事件 Event 文章标签： 对象 Event javascript 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32758013/article/details/77147193
本文详细介绍了JavaScript中的Event事件对象，包括altKey、button、clientX、clientY、ctrlKey、charCode、key、keyCode、which、metaKey、relatedTarget、screenX、screenY和shiftKey等属性，探讨了它们的返回值、浏览器兼容性和应用场景，帮助开发者更好地理解和处理鼠标和键盘事件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下大部分事件的浏览器支持

googleIEfirefoxsafariopera
truetruetruetruetrue

属性

1. altKey

返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了

返回值

true,false,1,0表达的都是布尔关系。

event.altKey=true|false|1|0

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
    <style>
        div{
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div id='div1'>

    </div>
</body>
<script>
    div1.onclick = function(e){
        if(e.altKey){
            alert('alt');
        }else{
            alert('no alt');
        }
    }
</script>
</html>

2. button

可返回一个整数，指示当事件被触发时哪个鼠标按键被点击

event.button=0|1|2

返回值
  • 0 指定鼠标左键。
  • 1 指定鼠标中键。
  • 2 指定鼠标右键。
    注意： Internet Explorer 8 及更早IE版本有不同的参数：
  • 1 指定鼠标左键。
  • 4 指定鼠标中键。
  • 2 指定鼠标右键。
注意

对于惯用左手的鼠标配置，上面的参数是颠倒的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>

 </body>
 <script>
        document.onclick = function(e){
            e.preventDefault();
            switch(e.button){
                case 0:alert('鼠标左键');
                break;
                case 1:alert("鼠标中键");
                break;
                case 2:function a(){            
                        alert("鼠标右键");
                    };
                break;
            }
        }
 </script>
</html>

3. clientX

返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

提示
  • 该事件只返回相对于浏览器来说的水平坐标，不包含滚动的值。如果要获取相对于整个页面的坐标，可以使用 e.pageX 来代替，但是IE8及其以下版本不支持 e.pageX。推荐使用 document.body.scrollLeft + e.clientX 来获取相对于整个页面的坐标。

event.clientX

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body style='height:3000px;'>

 </body>
 <script>
 document.onclick = function(e){
    console.log(document.body.scrollTop + e.clientY);
    console.log(document.body.scrollLeft + e.clientX);
 }


 </script>
</html>

4. clientY

返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。

提示
  • 该事件只返回相对于浏览器来说的水平坐标，不包含滚动的值。如果要获取相对于整个页面的坐标，可以使用 e.pageY 来代替，但是IE8及其以下版本不支持 e.pageX。推荐使用 document.body.scrollLeft + e.clientX 来获取相对于整个页面的坐标。

event.clientY

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body style='height:3000px;'>

 </body>
 <script>
 document.onclick = function(e){
    console.log(document.body.scrollTop + e.clientY);
    console.log(document.body.scrollLeft + e.clientX);
 }


 </script>
</html>

5. ctrlKey

返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。

event.ctrlKey=true|false|1|0

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>

 </body>
 <script>

 document.onclick = function(e){
    alert(e.ctrlKey);
 }

 </script>
</html>

6. charCode

返回onkeypress事件触发键值的字母代码

提示
  • Unicode 字符代码是一个字母的数字 (如数字 “97” 代表字母 “a”)。
  • 所有 Unicode 字符列表可查看菜鸟教程的 完整 Unicode 参考手册。
  • 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。
  • 如果该属性用于 onkeydown 或 onkeyup 事件，返回值总为 “0”。
  • 该属性是只读的。
  • which 和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用 key 属性来替代该方法。
  • IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 兼容这些浏览器你可以使用以下代码：var x = event.charCode || event.keyCode; // 使用 charCode 或 keyCode, 这样可支持不同浏览器
  • 你同样可以使用 keyCode 属性来检测特殊的按键 (如 “caps lock” 或 箭头按键)。 keyCode 和 charCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用 key 属性来替代该方法。
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
  • onkeypress属性不支持检测特殊按键。
浏览器支持
googleIEfirefoxsafariopera
true9.0truetruetrue

event.charCode

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'/>
 </body>
 <script>
input.onkeyup = function(e){
    console.log(e.charCode|| e.keyCode);
 }

 </script>
</html>

7. key

在按下按键时返回按键的标识符

提示
  • 按键标识符是表示键盘按钮的字符串，该属性的返回值可以是：
    • 单个字母 (如 “a”, “W”, “4”, “+” 或 “$”)
    • 多个字母 (如 “F1”, “Enter”, “HOME” 或 “CAPS LOCK”)
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
浏览器支持
googleIEfirefoxsafariopera
不支持9.023.0不支持不支持

event.key

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'/>
 </body>
 <script>
input.onkeyup = function(e){
    console.log(e.key);
 }

 </script>
</html>

8. keyCode

在按下按键时返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
两种代码类型的区别是:
* 字符代码 - 表示 ASCII 字符的数字
* 键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的，例如小写字符 “w” 和大写字符 “W” 有相同的键盘代码，因为他们他们键盘上 ( “W” 代码为 “87”)，但是它们有不同的字符代码，两个字符输出是不一样的( “w” 和 “W” 字符代码为 “119” 和 “87”)

提示
  • 所有 Unicode 字符列表可查看菜鸟教程的 完整 Unicode 参考手册。
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
  • 如果需要知道用户按下的是打印键 (如 “a” 或 “5”)，建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 “F1”, “CAPS LOCK” 或 “Home”) 可使用 onkeydown 或 onkeyup 事件。
  • 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。
  • 该属性是只读的。
  • which 和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用 key 属性来替代该方法。
  • keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 可以一起使用 which 和 keyCode 属性来解决:
    var x = event.which || event.keyCode// 使用 which 或 keyCode, 这样可支持不同浏览器

event.keyCode

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'/>
 </body>
 <script>
input.onkeypress  = function(e){
    console.log(e.which || e.keyCode);
 }

 </script>
</html>

9. which

在按下按键时返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。
两种代码类型的区别是:
* 字符代码 - 表示 ASCII 字符的数字
* 键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的，例如小写字符 “w” 和大写字符 “W” 有相同的键盘代码，因为他们他们键盘上 ( “W” 代码为 “87”)，但是它们有不同的字符代码，两个字符输出是不一样的( “w” 和 “W” 字符代码为 “119” 和 “87”)

提示
  • 所有 Unicode 字符列表可查看菜鸟教程的 完整 Unicode 参考手册。
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
  • 如果你想查看是否按下了 “ALT”, “CTRL”, “META” 或 “SHIFT” 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
  • 如果需要知道用户按下的是打印键 (如 “a” 或 “5”)，建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 “F1”, “CAPS LOCK” 或 “Home”) 可使用 onkeydown 或 onkeyup 事件。
  • 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。
  • 该属性是只读的。
  • which 和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用 key 属性来替代该方法。
  • IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是，keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。 可以一起使用 which 和 keyCode 属性来解决:
    var x = event.which || event.keyCode// 使用 which 或 keyCode, 这样可支持不同浏览器
浏览器支持
googleIEfirefoxsafariopera
true9.0truetruetrue

event.which

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'/>
 </body>
 <script>
input.onkeypress  = function(e){
    console.log(e.which || e.keyCode);
 }

 </script>
</html>

10. metaKey

返回一个布尔值，指示当事件发生时，”meta” 键是否被按下并保持住。

提示
  • meta键对应window键。

event.metaKey

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>

 </body>
 <script>
document.onclick  = function(e){
    console.log(e.metaKey);
 }

 </script>
</html>

11. relatedTarget

返回与事件的目标节点相关的节点

提示
  • 对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。
  • 对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
  • 对于其他类型的事件来说，这个属性没有用。

event.relatedTarget

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'>
 </body>
 <script>
input.onmouseover  = function(e){
    console.log(e.relatedTarget);
 }
 input.onmouseout  = function(e){
    console.log(e.relatedTarget);
 }

 </script>
</html>

对于以上代码来说，当鼠标从input框上，左，右边进入时显示的是body标签，从下边进入时显示的是根元素html。这是因为body的高度的原因。

12. screenX

返回事件发生时鼠标指针相对于屏幕的水平坐标

提示
  • 此属性只是返回事件触发点与屏幕左边(X)的距离。

event.screenX

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'>
 </body>
 <script>
input.onmouseover  = function(e){
    console.log(e.screenX);
    console.log(e.screenY);
 }

 </script>
</html>

13. screenY

返回事件发生时鼠标指针相对于屏幕的垂直坐标

提示
  • 此属性只是返回事件触发点与屏幕顶部(Y)的距离。

event.screenY

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'>
 </body>
 <script>
input.onmouseover  = function(e){
    console.log(e.screenX);
    console.log(e.screenY);
 }

 </script>
</html>

14. shiftKey

可返回一个布尔值，指示当事件发生时，”SHIFT” 键是否被按下并保持住。

event.shiftKey=true|false|1|0

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"/>
 <title>zsh</title>
 <style>

 </style>
</head>
 <body>
    <input type="text" id='input'>
 </body>
 <script>
input.onmouseover  = function(e){
    alert(e.shiftKey);
 }

 </script>
</html>

文档内容出自 W3cSchool和菜鸟教程， 如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/

Event对象之鼠标事件
zzzzz周绍辉的博客
07-22 1048
Event 对象Event 对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！事件句柄　(Event Handlers)HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入
java 全局钩子_[原]在全局鼠标钩子中模拟鼠标右键单击
weixin_39637203的博客
02-16 265
//bSwap:BOOL型//为TRUE为切换左右键功能，为FALSE为恢复原左右键功能::SwapMouseButton(bSwap);可以使用RegisterHotKey()注册一个热键，在需要时切换。但是还得知道该传入TRUE还是FALSE到SwapMouseButton()，那么可以使用GetSystemMetrics(SM_SWAPBUTTON)查询鼠标当前左右键功能是否反转了://返回...
常用的鼠标事件（event）
又一个四季在轮回
03-16 1367
常见的鼠标事件 client：相对于浏览器可视区的坐标。（能看见的范围，无论你如何下拉翻页） page：相对于整个文档。即相对于整个页面的x，y轴坐标（距离） screen：相对于整个电脑屏幕的坐标 实现图片跟图片一起移动功能 onmousemove：鼠标移动 注意：一定不要忘了位置的单位 <head> <meta charset="UTF-8"> &l...
键盘事件（onkeyup onkeydown）
qq_39288987的博客
04-07 2283
两者的区别 1.表示的意义不同。onkeyup键盘抬起事件，onkeydown键盘按下事件 2.触发时机不同。onkeyup 事件会在键盘按键被松开时发生。onkeydown 事件会在用户按下一个键盘按键时发生。 3.监听的值不同。onkeyup监听的是本次的结果，onkeydown监听的是上一次的结果。 实例如下： <!DOCTYPE html> <html lang="en"...
Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 202 Article 3: Rich Functionality复杂功能 - OnKeyUp Event - OnKeyUp事件
胡争辉
02-08 2668
Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 202 Article 3: Rich Functionality复杂功能 - OnKeyUp Event - OnKeyUp事件Overview概述    1. OnKeyUp Event    1. OnKeyUp事件    2. Sample Usage: Real-ti
Python GUI编程 169_事件机制和消息循环原理_鼠标事件_键盘事件_event对象.mp4
02-09
Python GUI编程 169_事件机制和消息循环原理_鼠标事件_键盘事件_event对象.mp4
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
10-27
接着，文章会介绍Event对象，这是JavaScript事件编程中的核心对象，包含了关于事件的各种信息，比如事件的类型、触发事件的元素以及事件发生时鼠标的具体位置等。现在让我们深入学习这些知识点。 首先，对于IE浏览...
JS的Event事件对象使用方法
12-02
理解并熟练使用Event对象是每个前端开发者必备的技能之一。本篇文章将深入探讨JS的Event事件对象的使用方法。 首先，我们来分析提供的代码片段： ```javascript function getEvent(event) { var ev = event || ...
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
10-17
Vue中的事件处理器默认会传递事件到父级，但我们可以使用event对象的cancelBubble属性设置为true来阻止事件继续冒泡。Vue还提供了一个更加简洁的方法，@click.stop，它阻止了事件继续传播，也就是说阻止了冒泡。 ...
什么是事件对象（Event Object）？如何使用它获取事件信息？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-22 1320
基本概念和作用说明示例一：监听click事件示例二：访问事件对象的属性示例三：阻止默认行为示例四：取消事件冒泡示例五：键盘事件使用技巧和分析在前端开发中，事件处理是构建交互式用户界面的核心。每当用户与网页进行互动，如点击按钮、滚动页面或输入文本时，浏览器都会触发一个事件。为了响应这些事件，JavaScript 提供了Event对象，它封装了所有关于事件的信息。本文将深入探讨Event对象的基本概念、属性和方法，并通过多个示例展示如何利用这些功能来增强网站的用户体验。
onkeyup是什么事件_javascript 事件基础知识
weixin_39960700的博客
11-29 1167
1. 什么是Event对象：a) 用来获取事件的详细信息；b) 不兼容问题：2. 获取event对象的兼容性写法：a) Var Event = ev || event;3. Document到底是什么？a) 是一个节点；b) 是最顶层的虚拟的父节点，是HTML 的父节点；c) 通过document可以找到底下的所有的子节点；连HTML也是包含在document里面；d) Document上加事件，...
php中eventkey,JavaScript_Event altKey,ctrlKey,shiftKey属性解析，event.altKey 功能：检测事件发生 - phpStudy...
weixin_32600979的博客
03-27 260
Event altKey,ctrlKey,shiftKey属性解析event.altKey功能：检测事件发生时Alt键是否被按住了。语法：event.altKey取值：true | false说明：altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。event.ctrlKey功能：检测事件发...
JS中监听键盘操作，onkeyup / onkeydown绑定，event.keyCode，常用KeyCode大全
Rudon滨海渔村的博客
04-21 7133
区别 onkeydown 当用户按下键盘按键时触发。 onkeyup 当用户释放键盘按键时触发。 onkeypress 当键盘按键被按下并释放一个键时发生。 onchange 当对象或选中区的内容改变时触发。 jQuery绑定左右方向键事件 $(document).keydown(function(event){ var e = event || window.eve...
常用鼠标键盘事件总结
weixin_34274029的博客
03-20 417
2019独角兽企业重金招聘Python工程师标准>>> ...
window.event对象的属性[附unicode对应键码表]
CIIIC的专栏
12-04 1622
　　1.altKey----检查alt键的状态。 　　返回值：当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。 　　2.ctrlKey----检查ctrl键的状态。 　　返回值：当ctrl键按下时，值为 TRUE ，否则为 FALSE 。只读。 　　3.shiftKey----检查shift键的状态。 　　返回值：当shift键按下时，值为 TRUE ，否则为 FALSE
JS中的键盘事件（onkeydown、onkeyup、keyCode）
热门推荐
Fantasc的博客
08-14 2万+
键盘事件： okeydown:键盘被按下，如果一直按着键盘的按键，则okeydown事件会一直被触发。 - 当键盘按键一直被按住的时候，事件被连续触发，第一次和第二次以及后面的n次之间，触发的时间间隔会稍长，在0.5秒左右（一直按着按键，事件连续触发，第一次触发之后会有0.5秒左右的延迟，后面的连续触发事件不会有延迟，延迟只在第一次和第二次之间）。这种设计是为了防止误操作。 在页面中需要判断按键是否被按下，可以用一个简单的例子进行测试，如下： <script type="text/javasc
onKeyUp方法简介
风平浪静的专栏
09-04 4726
本节介绍onKeyUp方法的原理及使用方法，该方法同样是接口KeyEvent.Callback中的一个抽象方法，并且所有的View同样全部实现了该接口并重写了该方法，onKeyUp方法用来捕捉手机键盘按键抬起的事件，方法的签名如下所示。 1   public boolean onKeyUp (int keyCode, KeyEvent event)  参数keyCode：参数keyCode同样
Qt事件处理实战：鼠标与键盘响应示例
事件对象`event`包含了鼠标移动时的坐标、按钮状态等信息。这个事件对于需要响应鼠标移动动作的应用程序非常重要，如鼠标悬停提示、鼠标拖拽操作等。 - **鼠标点击响应（Mouse Click Event）**：通过重写`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值