JavaScript深入理解window.event事件
4 浏览量
更新于2024-09-02
收藏 64KB PDF 举报
"本文主要介绍了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页未读，立即下载
451 浏览量
284 浏览量
点击了解资源详情
151 浏览量
237 浏览量
189 浏览量
716 浏览量
341 浏览量
146 浏览量
weixin_38742291
- 粉丝: 5
我的内容管理
展开
最新资源
- Premiere Pro CS6视频编辑项目教程微课版教案
- SSM+Lucene+Redis搜索引擎缓存实例解析
- 全栈打字稿应用：演示项目实践与探索
- 仿Windows风格的AJAX无限级树形菜单实现教程
- 乐华2025L驱动板通用升级解决方案
- Java通过jcraft实现SFTP文件上传下载教程
- TTT素材-制造1资源包介绍与记录
- 深入C语言编程技巧与实践指南
- Oracle数据自动导出并转换为Excel工具使用教程
- Ubuntu下Deepin-Wine容器的使用与管理
- C语言网络聊天室功能详解：禁言、踢人与群聊
- AndriodSituationClick事件：详解按钮点击响应机制
- 探索Android-NetworkCue库：高效的网络监听解决方案
- 电子通信毕业设计：简易电感线圈制作方法
- 兼容性数据库Compat DB 4.2.52-5.1版本发布
- Android平台部署GNU Linux的新方案：dogeland体验
