了解window.event属性及其用法

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

以下是w3school对event对象的介绍：

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

有时我们想在事件发生时执行JavaScript，例如如当用户点击按钮时。

您可以使用处理事件

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
}

但是，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';
}

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

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

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;

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

function IndentifyMe(){
 alert("You clicked on " + window.event.srcElement.tagName);
}
<body onclick = "IndentifyMe()">

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

事件是用户交互的生命线。没有事件，你无法与页面交互。

事件处理程序用于在某个操作发生时调用某些JavaScript。如果你想要一些当用户将光标移动到元素上时要触发的行为，可以使用onmouseover事件处理程序。

"DOM脚本：使用JavaScript和文档对象模型的Web设计：第二版">

相关内容

最新更新

热门标签：