Javascript 事件 : window. 事件与参数引用(函数)

Question

有什么区别:

function test (e) {
    console.log("Event: ", e);
}
document.querySelector("button").onclick = test;

<button>Click!</button>

和:

function test () {
    console.log("Event: ", event); // same as window.event
}
document.querySelector("button").onclick = test;

<button>Click!</button>

它们似乎返回完全相同的对象，甚至包含以毫秒为单位的相同 timeStamp 值。

我经常看到代码使用第一个示例，使用 e 或 evt，但是第二个示例有什么问题？

我理解event和window.event是一样的，都是全局变量，但是使用e的目的是什么如果 event 做同样的事情？

Answer 1

标准方式

有两种添加事件监听器的标准方法:事件处理程序和addEventListener。

事件处理器

最初是 DOM0(未由任何规范定义但已广泛实现)，它们在 HTML5 spec 中正确定义.

Many objects can have event handlers specified. These act as non-capture event listeners for the object on which they are specified. [DOM]

An event handler has a name, which always starts with "on" and is followed by the name of the event for which it is intended.

An event handler can either have the value null, or be set to a callback object, or be set to an internal raw uncompiled handler. The EventHandler callback function type describes how this is exposed to scripts. Initially, event handlers must be set to null.

Event handlers are exposed in one of two ways.

The first way, common to all event handlers, is as an event handler IDL attribute.

The second way is as an event handler content attribute.

事件处理程序 IDL 属性

An event handler IDL attribute is an IDL attribute for a specific event handler. The name of the IDL attribute is the same as the name of the event handler.

事件处理程序将是分配给 IDL 属性的函数。该函数(或回调)将以事件作为其唯一参数被调用:

Invoke callback with one argument, the value of which is the Event object E

例子:

document.querySelector("button").onclick = function(evt) {
  console.log('Event: ' + evt);
};

<button>Click!</button>

事件处理程序内容属性

An event handler content attribute is a content attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.

当您设置它们时，处理程序将是一个 internal raw uncompiled handler .这意味着 getting the current value of the event handler将更复杂:字符串将被解析为函数的 FunctionBody，该函数具有名为 event 的参数:

Let the function have a single argument called event.

例子:

<button onclick="console.log('Event: ' + event);">Click!</button>

document.querySelector("button").setAttribute('onclick',
  "console.log('Event: ' + event);"
);

<button>Click!</button>

添加事件监听器

它是由DOM L2 Events介绍的，现在 DOM4定义为:

The addEventListener(type, callback, capture) method must run these steps:

1. If callback is null, terminate these steps.

2. Append an event listener to the associated list of event listeners with type set to type, callback set to callback, and capture set to capture, unless there already is an event listener in that list with the same type, callback, and capture.

当事件监听器是invoked时，回调以事件作为唯一参数调用:

Call listener's callback's handleEvent, with the event passed to this algorithm as the first argument

例子:

document.querySelector("button").addEventListener('click', function(evt) {
  console.log('Event: ' + evt);
});

<button>Click!</button>

---

兼容性说明

旧版 IE 不支持 addEventListener，并且不向事件处理程序传递任何参数。

但是，它提供了另一种访问事件的方法:window 对象从 Window.prototype 继承了一个 event 属性。该属性有一个返回事件对象的 getter。

因此，支持旧 IE 的常用方法是使用参数并在必要时用 window.event 覆盖它:

document.querySelector("button").onclick = function(evt) {
  evt = evt || window.event;
  console.log('Event: ' + evt);
};

<button>Click!</button>

新的 IE 将事件作为参数传递到 addEventListener 和事件处理程序中，因此不再需要这样做。它还继续实现 Window.prototype.event。

同样，Chrome 实现了 window.event，可能是为了支持为 IE 编写的旧代码。

但是，最好避免使用它:

• 这不是标准的。
• 标准替代品得到广泛实现(旧 IE 除外)。
• 它并不适用于所有浏览器，例如 Firefox。