JS | JS中的event和window.event的区别

原创 已于 2024-12-19 09:27:00 修改 · 864 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #事件对象 #event #window对象 #IE浏览器事件对象

于 2024-12-19 08:30:00 首次发布

window.event 和event的主要区别在于‌：

  • ‌window.event‌：这是Internet Explorer特有的事件对象，不支持其他浏览器。在IE中，window.event 是一个全局变量，可以在任何地方直接使用，不需要作为参数传递。然而，在其他浏览器中（如Firefox、Chrome等），window.event 并不存在，需要通过事件处理函数的参数来获取事件对象‌。

  • ‌event‌：遵循W3C标准，是大多数现代浏览器支持的事件对象。在标准兼容的浏览器中，事件对象作为参数传递给事件处理函数。这种做法不仅提高了代码的兼容性，也使得代码更加标准化和可移植‌。

‌详细解释‌：

  • ‌window.event‌：在IE浏览器中，window.event是一个全局对象，可以在任何地方直接访问，无需通过函数参数传递。然而，这种做法不具有跨浏览器兼容性，因此在开发中需要特别注意。在IE中，事件源可以通过window.event.srcElement访问，这与标准中的event.target不同‌。

  • ‌event‌：在符合W3C标准的浏览器中，事件对象通过事件处理函数的参数传递。这种做法不仅提高了代码的兼容性，也使得代码更加标准化和可移植。在标准浏览器中，事件源可以通过event.target访问‌。

​​补充说明‌：

  • ‌事件处理‌：在编写跨浏览器的JavaScript代码时，通常会将window.event和标准的event对象进行兼容处理，例如通过条件判断来确保在所有浏览器中都能正确获取事件对象。例如：var evt = event || window.event; 这样的写法可以确保在所有主流浏览器中都能获取到事件对象‌。

  • ‌事件对象属性‌：事件对象包含了事件的详细信息，如事件类型（type）、事件源（target/srcElement）、鼠标位置（clientX/Y、offsetX/Y等）、按键状态（keyCode、altKey、ctrlKey等）。了解这些属性的使用可以帮助开发者更好地处理各种事件‌。

参考资料

Event和window.event-优快云博客 | Event和window.event的区别-优快云博客

事件 e || window.event-优快云博客 | window.event对象详细介绍 - 优快云博客

[JS]详尽解析window.event对象
11-25
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
js事件源window.event.srcElement兼容性写法(详解)
10-21
在IE浏览器中，我们可以通过window.event.srcElement属性来访问事件源，但在Firefox等其他浏览器中，这一属性是不存在的，因此需要寻找兼容性写法。这篇文档便是对window.event.srcElement属性及其兼容性写法的详细...
event对象祥解
weixin_30586257的博客
01-06 216
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。 code&...
JS window.event 详解
ritaleo的专栏
11-27 240
1. window.event属性  altKey:alt是否按下  button:鼠标按下的值   可能的值：    0 没按键    1 按左键    2 按右键    3 按左右键    4 按中间键    5 按左键和中间键    6 按右键和中间键    7 按所有的键  这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标...
js event对象调用java_JS event使用方法详解
weixin_36263314的博客
02-16 276
event的某些属性只对特定的事件有意义。比如，fromElement和toElement属性只对onmouseover和onmouseout事件有意义。下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。CancelsLinks...functioncancelLink()...{if(window.event.srcElement.tagN...
Javascript中的window.event.keyCode使用介绍
12-09
在JavaScript中，`window.event.keyCode` 是一个非常实用的特性，用于识别用户在键盘上按下的具体按键。这个属性在事件处理函数中被用来获取按键的ASCII码或Unicode码，从而帮助开发者根据用户输入的键执行不同的...
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
10-24
在JavaScript编程中，`this`关键字和`window.event.srcElement`是两个非常重要的概念，它们在事件处理和函数上下文管理中扮演着重要的角色。对于JavaScript的初学者来说，理解这两个概念是十分必要的，因为这不仅...
js window.event
sunboyzsm的专栏
08-28 363
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 on
window.event对象详细介绍
woxingwosu13的专栏
05-14 7664
body{line-height:1.5;}1、event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 2、属性：
js window.event对象详尽解析
01-19
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子 下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。 <HTML> <HEAD><TITLE>Cancels Links</TITLE> [removed] function cancelLink() { if (wind
关于js的window.event的详解上
qq_33625012的博客
02-15 3043
ps:以下文章纯粹自己做为资料保留和分享的，如果不足请赐教谢谢。 window.onload=function(e){ console.log(e); } bubbles: 事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。 cancelBubble: Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前
事件 e||window.event
kui大师的博客
04-28 2182
事件：比如点击一个按钮，会弹出一个对话框，在js中，“点击“这个事情看作一个事件。”弹出对话框“就是点击事件中做的一些事 事件三要数：1、事件源 2、事件类型 3、事件处理函数function(){} 事件对象event： 作用：处理事件的 创建方式：当触发事件的时候由系统自动创建，比如点击时候创建、绑定不算创建。创建之后事件对象会赋给形参 获取事件对象：在事件处理函数中拿到 <div onclick="demo(event)">&l...
js中window.event用法
kbx8916的博客
11-11 355
脚本之家链接
window.event
09-19 735
关键词：详尽解析window.event                                            描述event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 
Event/window.Event属性和方法
qingfeng_825的专栏
01-04 266
一、event说明：event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；                  event对象只在事件发生的过程中才有效。                  firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。                在IE/Op...
JavaScript 捕获按键
whwenming的专栏
12-25 1095
function test(event) { event = event || window.event; if(event.keyCode==13) { alert("你按了回车") } if(event.shiftKey==true) { alert("你按了shift") } if(event.ctrlKey==true) { alert("你按了ctrl") }if(event.altK
event 和 window.event
ole_triangle_java的博客
12-07 523
event 和 window.event 出处：http://hi.baidu.com/zzcc_8/blog/item/1c6e7a8f560765f3503d9200.html   function test(event)  {  event = event || window.event;  if(event.keyCode==13)  {  alert("你
event = event || window.event;
最新发布
09-15
`event = event || window.event;` 是一种用于处理事件对象兼容性的代码写法，以下是对其含义、用途及相关知识的详细解释： ### 含义 在 JavaScript 中，当事件被触发时，会产生一个事件对象（`event`），这个对象包含了所有与事件有关的信息，如鼠标位置、按键状态等。然而，不同浏览器对于事件对象的获取方式存在差异。 - 在现代浏览器（如 Chrome、Firefox 等）中，事件对象会作为参数传递给事件处理函数，例如： ```javascript document.addEventListener('click', function(event) { // 这里的 event 就是事件对象 }); ``` - 而在旧版本的 Internet Explorer（IE）浏览器中，事件对象不会作为参数传递给事件处理函数，而是作为 `window` 对象的一个属性 `window.event` 存在。 `event = event || window.event;` 这行代码的作用是：首先检查 `event` 是否存在，如果存在则使用它；如果 `event` 不存在（在旧版 IE 中），则使用 `window.event` 作为事件对象。这里使用了逻辑或运算符 `||`，它会返回第一个为真的值。 ### 用途 这行代码的主要用途是实现事件对象在不同浏览器之间的兼容性。通过这种方式，开发者可以编写统一的代码来处理事件，而不必担心不同浏览器之间的差异。例如： ```javascript function handleClick(event) { event = event || window.event; // 现在可以统一使用 event 对象来处理事件 console.log(event.target); // 输出事件触发的目标元素 } document.getElementById('myButton').addEventListener('click', handleClick); ``` ### 相关知识 - **事件对象的属性和方法**：事件对象包含了许多有用的属性和方法，用于获取事件的相关信息。例如，`event.target` 可以获取事件触发的目标元素，`event.type` 可以获取事件的类型（如 `click`、`mouseover` 等）。参考文档：https://www.w3school.com.cn/jsref/dom_obj_event.asp 提供了更多关于事件对象属性的详细描述 [^2]。 - **事件处理程序的绑定方式**：事件处理程序可以通过多种方式绑定到 DOM 元素上，如 `addEventListener` 方法和直接在元素上设置 `onclick` 等属性。不同的绑定方式在不同浏览器中的兼容性也有所不同。例如，`addEventListener` 是现代浏览器推荐的方式，但旧版 IE 不支持，而直接设置 `onclick` 等属性在旧版 IE 中也能正常工作 [^2][^3]。 - **事件冒泡和捕获**：事件在 DOM 树中传播的方式有两种，即事件冒泡和事件捕获。事件对象在不同的传播阶段可能会有不同的表现，开发者可以通过 `event.eventPhase` 属性来获取当前事件所处的阶段 [^2]。 ### 代码示例 以下是一个完整的示例，展示了如何使用 `event = event || window.event;` 来处理事件： ```javascript window.onload = function () { var btn = document.getElementById('btn'); btn.addEventListener('click', function (ev) { var event = ev || window.event; // 兼容写法 console.log(event.target); // 事件对象目标 console.log(event.type); console.log(event.eventPhase); console.log(event); }); btn.addEventListener('mouseover', function (ev) { var event = ev || window.event; // 兼容写法 console.log(event.target); // 事件对象目标 console.log(event.type); console.log(event); }); }; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值