JavaScript深入理解window.event事件
PDF格式 | 64KB |
更新于2024-09-02
| 198 浏览量 | 举报
"本文主要介绍了JavaScript中的window.event事件，包括其用法、特性和相关属性。window.event是JavaScript中一个内置的对象，它包含了当前正在处理的事件的相关信息。"
在JavaScript中，`window.event` 是一个全局事件对象，用于访问和处理页面中发生的任何事件。这个对象在事件发生时被创建，并且只在事件处理函数内部有效。`window.event` 提供了获取和操作事件信息的方法，如触发事件的元素、鼠标位置、按键状态等。
1. **event对象的属性**：
- `altKey`：检查`Alt`键的状态，返回一个布尔值，表示`Alt`键是否被按下。
- `button`：用于确定哪个鼠标按钮被按下。可能的值为0（左键），1（中间键），2（右键）。
- `cancelBubble`：设置或获取事件是否应继续冒泡到DOM树的其他部分。默认情况下，事件会从最具体的元素（事件的目标元素）向上冒泡到文档的根元素。
- `clientX` 和 `clientY`：分别表示鼠标相对于浏览器窗口的水平和垂直坐标。
- `ctrlKey`：检查`Ctrl`键的状态，返回一个布尔值，表示`Ctrl`键是否被按下。
- `fromElement` 和 `toElement`：仅在`onmouseover`和`onmouseout`事件中有效，分别表示鼠标离开和进入的元素。
- `keyCode`：表示键盘上被按下键的ASCII码。
- `offsetX` 和 `offsetY`：表示鼠标相对于事件目标元素的位置。
- `propertyName`：在属性改变事件中，表示改变的属性名称。
- `returnValue`：可以用来取消事件的默认行为，如阻止链接的跳转或表单的提交。
- `screenX` 和 `screenY`：表示鼠标相对于屏幕的水平和垂直坐标。
- `shiftKey`：检查`Shift`键的状态，返回一个布尔值，表示`Shift`键是否被按下。
- `srcElement`：事件的目标元素，相当于`event.target`。
- `srcFilter`：在Internet Explorer中，与图像滤镜相关。
- `type`：事件的类型，如"click"、"mouseover"等。
- `x` 和 `y`：在旧版本的IE中，表示鼠标相对于文档的水平和垂直坐标，但已经被`clientX`和`clientY`替代。
2. **使用示例**：
- 鼠标点击事件示例：
```javascript
document.onclick = function(event) {
if (event.srcElement.tagName === 'A' && event.shiftKey) {
event.preventDefault(); // 现代浏览器使用event.preventDefault()代替window.event.returnValue=false;
}
};
```
- 鼠标移动事件示例，更新浏览器状态栏：
```html
<body onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY">
```
3. **注意事项**：
- 不是所有浏览器都支持`window.event`，尤其是非IE浏览器。在现代浏览器中，事件作为参数传递给事件处理函数，如`element.addEventListener('click', function(event) { ... })`，因此，建议使用这种方式来获取事件对象。
- 在处理事件时，要考虑到不同浏览器之间的兼容性问题，可能需要使用`event.preventDefault()`来阻止事件的默认行为，而不是`event.returnValue=false`。
- 一些属性，如`fromElement`和`toElement`，只在特定类型的事件中可用，使用时需注意适用场景。
`window.event` 是JavaScript中处理事件的一个重要工具，它提供了访问事件详细信息的能力，使得我们可以根据这些信息来定制事件处理逻辑。了解并熟练掌握`window.event` 的使用，能够帮助开发者更好地控制和响应用户交互。
javascript中中window.event事件用法详解事件用法详解
前两天写程序时因为要用到javascript中的window.event事件，于是就在网上搜了一下，终于找到一篇不错的文
章，来与大家分享下
前两天写程序时因为要用到javascript中的window.event事件，于是就在网上搜了一下，终于找到一篇不错的文章，来与大家
分享下：
描述描述
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意
义。
例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。
复制代码 代码如下:
<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE=”JScript”>
function cancelLink() {
if (window.event.srcElement.tagName == “A” && window.event.shiftKey)
window.event.returnValue = false;
}
</SCRIPT>
<BODY onclick=”cancelLink()”>下面的例子在状态栏上显示鼠标的当前位置。
<BODY onmousemove=”window.status = ‘X=' + window.event.x + ‘ Y=' + window.event.y”>属性：
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue,
screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
1.altKey
描述：
检查alt键的状态。
语法：
event.altKey
可能的值：
当alt键按下时，值为 TRUE ，否则为 FALSE 。只读。
2.button
描述：
检查按下的鼠标键。
语法：
event.button
可能的值：
0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键
这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如
onclick）。
3.cancelBubble
描述：
检测是否接受上层元素的事件的控制。
语法：
event.cancelBubble[ = cancelBubble]
可能的值：
这是一个可读写的布尔值:
TRUE 不被上层原素的事件控制。
FALSE 允许被上层元素的事件控制。这是默认值。
例子：
下面的代码片断演示了当在图片上点击（onclick）时，如果同时shift键也被按下，就取消上层元素（body）上的事件onclick
所引发的showSrc()函数。
复制代码 代码如下:
下载后可阅读完整内容，剩余3页未读，立即下载
相关推荐
weixin_38742291
- 粉丝: 5
我的内容管理
展开
最新资源
- C语言入门：算法与结构化程序设计
- C#语言基础：常见问题与解析(2)
- C#编程：Dispose与Close的差异解析
- Ubuntu 8.04 教程：快速安装与Linux入门
- Windows驱动框架：KMDF与UMDF的最新发展
- Oracle数据库日常监控与维护指南
- Java面试必备：基础、集合与多线程解析
- 2000年版《Thinking in Java》第二版发布：全面深度学习Java指南
- 深入理解C++指针：从基础到高级
- EJB 3.0实战教程：Jboss EJB3实例解析
- SIP协议在下一代网络中的应用与架构详解
- C#开发MSAgent：集成语音精灵与TTS技术
- Windows安装与多语言支持问题解答
- JBuilder7与Weblogic7集成配置教程
- Java实现动态演示的黄金搜索算法可视化
- JAVA程序设计课程讲义：历史、原理与开发环境
