Javascript 了解 window.event 属性及其用法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6926963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 23:47:53  来源:igfitidea点击:

Understanding the window.event property and its usage

javascriptdomevent-handling

提问by Craig Pottinger

I don't understand the motivation behind window.event or window.event.srcElement. In what context should one use this? What exactly does it represent in the DOM?

我不明白 window.event 或 window.event.srcElement 背后的动机。在什么情况下应该使用它?它在 DOM 中究竟代表什么?

回答by Molecular Man

Here what w3school saysabout eventobject:

以下是w3school关于event对象的说法

Events are actions that can be detected by JavaScript, and the event object gives information about the event that has occurred.

Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button.

事件是可以被 JavaScript 检测到的动作,事件对象提供有关已发生事件的信息。

有时我们希望在事件发生时执行 JavaScript,例如当用户单击按钮时。

You can handle events using:

您可以使用以下方法处理事件:

node.onclick = function(e) {
  // here you can handle event. e is an object.
  // It has some usefull properties like target. e.target refers to node
}

However Internet Explorer doesn't pass event to handler. Instead you can use window.event object which is being updated immediately after the event was fired. So the crossbrowser way to handle events:

但是 Internet Explorer 不会将事件传递给处理程序。相反,您可以使用在事件触发后立即更新的 window.event 对象。所以处理事件的跨浏览器方式:

node.onclick = function(e) {
  e = e || window.event;
  // also there is no e.target property in IE.
  // instead IE uses window.event.srcElement
  var target = e.target || e.srcElement;
  // Now target refers to node. And you can, for example, modify node:
  target.style.backgroundColor = '#f00';
}

回答by potNPan

Not sure if this difference has been changed in newer browser versions but basically, "In the Microsoft event accessing model there is a special property window.event that contains the last event that took place." (from reference)

不确定这种差异是否在较新的浏览器版本中有所改变,但基本上,“在 Microsoft 事件访问模型中,有一个特殊的属性 window.event 包含发生的最后一个事件。” (来自参考)

So, to write an event handler compatible across browsers you'd need to do something like this:

因此,要编写跨浏览器兼容的事件处理程序,您需要执行以下操作:

function doSomething(e) {
    if(!e) {
        var e = window.event;
    }
    var ele = e.target || e.srcElement;
    // get the clicked element
    // srcElement for IE, target for others
}
element.onclick = doSomething;

Reference: http://www.quirksmode.org/js/events_access.html

参考:http: //www.quirksmode.org/js/events_access.html

回答by hungryMind

function IndentifyMe(){
 alert("You clicked on " + window.event.srcElement.tagName);
}

<body onclick = "IndentifyMe()">

Try this code, with lots of element in body tag, and try clicking different element

试试这个代码,在 body 标签中有很多元素,然后尝试点击不同的元素

回答by user278064

Eventsare the lifeblood of user interaction. Without events, you couldn't interact with the page.

事件是用户交互的命脉。没有事件,您将无法与页面交互。

Event handlers are used to invoke some JavaScript when a certain action happens. If you want some behavior to be triggered when the user moves their cursor over an element, you use the onmouseover event handler.

事件处理程序用于在发生特定操作时调用某些 JavaScript。如果您希望在用户将光标移到元素上时触发某些行为,您可以使用 onmouseover 事件处理程序。

"DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition"

“DOM 脚本:使用 JavaScript 和文档对象模型进行网页设计:第二版”