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

来源：互联网发布：员工培训软件编辑：程序博客网时间：2024/06/04 23:44

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

google IE firefox safari opera true true true true true

属性

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属性不支持检测特殊按键。

浏览器支持

google IE firefox safari opera true 9.0 true true true

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 属性。

浏览器支持

google IE firefox safari opera 不支持 9.0 23.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

提示

所有 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, 这样可支持不同浏览器

浏览器支持

google IE firefox safari opera true 9.0 true true true

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/

阅读全文

0 0