Javascript事件：window.event对参数引用（函数） [英] Javascript events: window.event vs argument reference (function)

问题描述

有什么区别：

  function test（e）{console.log（Event：，e）;} document.querySelector（button）。onclick = test;  

 < button>点击！< / button>  

和：

  function test（）{console.log（Event：，event）; //与window.event相同} document.querySelector（button）。onclick = test;  

  
 
 
他们似乎返回完全相同的对象，甚至包含相同的 timeStamp 值，以毫秒为单位。
 
 
 
我经常使用第一个例子看到代码，使用 e 或 evt ，但是第二个例如？
 
 
 
我明白事件与 window.event ，这是一个全局变量，但如果事件执行相同操作，则使用 e 的目的是什么
解决方案
 
标准方式
 
 
 
有两种标准方法添加事件监听器：事件处理程序和 addEventListener 。
 
 
 
事件处理程序
 
 $ b $最初的DOM0（没有任何规格定义但广泛实施），它们在 HTML5规范中正确定义。 
 
 
许多对象可以指定事件处理程序。这些作为
指定的对象的
非捕获事件侦听器。  [DOM]  
 
 
 
 事件处理程序有一个名称，其中始终以在开始，
后面是其所针对的事件的名称。
 
 
 
 事件处理程序可以将值设为null ，或设置为
回调对象，或设置为内部未编译的处理程序。 
   EventHandler  回调函数类型描述了这是
暴露给脚本。最初，事件处理程序必须设置为null。
 
 
 
事件处理程序以两种方式之一显示。
 
 
 
所有事件处理程序通用的第一种方式是事件处理程序
 IDL属性。
 
 
 
第二种方式是作为事件处理程序内容属性。
 
 
 
 
 
事件处理程序IDL属性
 
 
 
 
 
一个事件处理程序IDL属性是一个特定的IDL属性
 事件处理程序。 IDL属性的名称与名称相同>事件处理程序。
 
 
事件处理程序将是分配给IDL属性的函数。该函数（或回调）将以事件为唯一参数来调用：
 
 
 使用一个参数调用 回调，其值为
  事件 对象  
 
 
示例：
 
 
 
 
 
 < pre class =snippet-code-js lang-js prettyprint-override>  document.querySelector（button）。onclick = function（evt）{console.log（'Event：'+ evt） ;};  

 < button>点击！按钮>  

事件处理程序内容属性

一个事件处理程序内容属性是一个
特定的内容属性事件处理程序。 content属性的名称是
与事件处理程序。

设置它们时，处理程序将是一个内部未编译的处理程序。这意味着获得事件处理程序的当前值将更复杂：字符串将被解析为函数的 FunctionBody ，该函数的参数名为事件：

让函数有一个名为事件的参数。

示例：

 < button onclick =console.log（'Event：'+ event）;>单击！< / button>  

  document.querySelector（button）。setAttribute（'onclick'，console.log（'Event：'+ event）;）;  

 < button>点击！< / button>  

addEventListener

由 DOM L2事件，现在 DOM4 将其定义为：

addEventListener（type，callback，capture）方法必须运行这些
步骤：

1. 如果回调为空，请终止这些步骤。




2. 追加事件侦听器到类型设置为类型的 ， >回调设置为
   回调，并将捕获设置为捕获，除非已经有类型的http://www.w3.org/TR/dom/#concept-event-listener =nofollow noreferrer>事件侦听器，
   回调和捕获。

当事件侦听器是被调用，回调调用事件作为唯一的参数：

调用监听器 strong>回调的 handleEvent ，事件通过
作为第一个参数

示例：

  document.querySelector（button）。addEventListener（'click'，function（evt）{console.log（'Event：'+ evt） }）;  

 < button>点击！按钮>  

---

兼容性说明

旧IE不支持 addEventListener ，并没有传递任何参数到事件处理程序。 / p>

但是，它提供了访问事件的另一种方式：窗口对象继承事件 property from Window.prototype 。该属性具有一个返回事件对象的getter。

因此，支持旧IE的常见方法是使用参数并将其覆盖为窗口

  document.querySelector （button）。onclick = function（evt）{evt = evt || window.event; console.log（'event：'+ evt）;};  

 < button>点击！< / button>  

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

同样，Chrome实现窗口。事件，可能支持为IE编写的旧代码。

但是，最好避免使用：

• 这不是标准的。


• 标准的替代方案被广泛实现（旧的IE除外）


• 在所有浏览器上都不起作用，例如在Firefox上。

What is the difference between:

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

<button>Click!</button>

and:

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

<button>Click!</button>

They seem to return the exact same object, even containing the same timeStamp value in milliseconds.

I often see code using the first example, using e or evt, but what is wrong with the second example?

I understand that event is the same as window.event, which is a global variable, but what is the purpose of using e if event does the same thing?

解决方案

Standard ways

There are two standard ways to add event listeners: event handlers and addEventListener.

Event handlers

Initially DOM0 (not defined by any spec but widely implemented), they are properly defined in the 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.

Event handler IDL attributes

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.

The event handler will be the function assigned to the IDL attribute. That function (or callback) will be called with the event as its only argument:

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

Example:

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

<button>Click!</button>

Event handler content attributes

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.

When you set them, the handler will be an internal raw uncompiled handler. That means that getting the current value of the event handler will be more complex: the string will be parsed as the FunctionBody of a function which has an argument named event:

Let the function have a single argument called event.

Examples:

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

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

<button>Click!</button>

addEventListener

It was introduced by DOM L2 Events, and now DOM4 defines it as:

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.

When the event listeners are invoked, the callback is called with the event as its only argument:

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

Example:

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

<button>Click!</button>

---

Compatibility notes

Old IE didn't support addEventListener, and didn't pass any argument to event handlers.

However, it provided another way to access the event: window objects inherit an event property from Window.prototype. That property has a getter which returns the event object.

Therefore, a common way to support old IE is using an argument and overriding it with window.event if necessary:

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

<button>Click!</button>

New IE passes the event as an argument in both addEventListener and event handlers, so that is no longer necessary. It also continues implementing Window.prototype.event.

Similarly, Chrome implements window.event, probably to support old code written for IE.

However, better avoid using that:

• It is not standard.
• The standard alternatives are widely implemented (except on old IE).
• It doesn't work on all browsers, for example on Firefox.

这篇关于Javascript事件：window.event对参数引用（函数）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！