参数e（事件）究竟是什么以及为什么将它传递给JavaScript函数？ [英] What exactly is the parameter e (event) and why pass it to JavaScript functions?

问题描述

好吧，当我学习JavaScript时，我读过的所有书籍和互联网文章都显示代码将参数 e 传递给处理JavaScript事件的函数，例如下面的代码块：

Well, when I learned JavaScript, all the books and Internet articles I read showed code passing a parameter e to functions that handle JavaScript events, such as the code block below:

function myEvent(e) {
    var evtType = e.type
    alert(evtType)
    // displays click, or whatever the event type was
}

我'我总是接受它的方式，但现在我有一些问题（这对我来说非常混乱）：

I've always accepted that as being the way it is, but now I have some questions (this is very confusing to me):

1. 哪里有这个 e 来自哪里？当我查看整个JavaScript文件时， e 似乎根本不存在。


2. 为什么要将此参数 e 传递给函数？如果我没有将 e 传递给他们，函数会停止工作吗？



3. 考虑下面的代码块。传递给匿名内部函数的事件变量（ e ）。假设我想在匿名函数之外使用一个事件对象（可能在 element.onkeypress 行上方/下方的行中）。我该怎么做？

1. Where does this e come from? When I look at the entire JavaScript file, e does not seem to exist at all.
2. Why pass this parameter e to functions? Will functions stop working if I do not pass e to them?

3. Consider the code block below. There is an event variable (e) passed to an anonymous inner function. Let's say I want to use an event object outside of the anonymous function (maybe in a line above/below the element.onkeypress line). How can I do this?

element.onkeypress = function(e) {
    if(e.keyCode) {
        element.keyCode = e.keyCode;
    } else {
        element.keyCode = e.charCode;
    }
};

推荐答案

e 是事件的缩写

最简单创建事件的方法是单击页面上的某个位置。

The simplest way to create an event is to click somewhere on the page.

单击时，会触发单击事件。此事件实际上是一个对象，其中包含有关刚刚发生的操作的信息。在这个例子的情况下，事件将有信息，例如点击的坐标（例如 event.screenX ），你点击的元素（ event.target ）等等。

When you click, a click event is triggered. This event is actually an object containing information about the action that just happened. In this example's case, the event would have info such as the coordinates of the click (event.screenX for example), the element on which you clicked (event.target), and much more.

现在，事件一直在发生，但你对所有事件都不感兴趣发生。当你 对某些事件感兴趣时，就是在你知道会创建事件的元素中添加一个事件监听器[1]。例如，您有兴趣知道当用户点击订阅按钮时，您希望在此事件发生时做某事。

Now, events happen all the time, however you are not interested in all the events that happen. When you are interested in some event however, it's when you add an event listener to the element you know will create events[1]. For example you are interested in knowing when the user clicks on a 'Subscribe' button and you want to do something when this event happens.

为了对这个事件做一些事情，你将事件处理程序绑定到你感兴趣的按钮。将处理程序绑定到元素的方法是执行 element.addEventListener（eventName，handler）。

In order to do something about this event you bind an event handler to the button you are interested in. The way to bind the handler to the element is by doing element.addEventListener(eventName, handler).

eventName 是一个字符串，它是您感兴趣的事件的名称，在这种情况下将是'click'（对于点击事件）。

eventName is a string and it's the name of the event you are interested in, in this case that would be 'click' (for the click event).

处理程序只是一个函数，它在事件发生时执行某些操作（已执行）。默认情况下，处理程序函数在执行时传递事件对象（在您感兴趣的事件/操作发生时创建）作为参数。

The handler is simply a function which does something (it's executed) when the event happens. The handler function, by default, when executed is passed the event object (that was created when the event/action you are interested in happened) as an argument.

将事件定义为处理函数的参数是可选的，但有时（大多数情况下），它是对处理程序函数有用，可以了解发生的事件。当您执行定义时，您会在功能中看到 e ，就像您提到的那样。请记住，事件只是一个常规的javascript对象，上面有很多属性。

Defining the event as a parameter of your handler function is optional but, sometimes (most times), it is useful for the handler function to know about the event that happened. When you do define it this is the e you see in the functions like the ones you mentioned. Remember, the event is just a regular javascript object, with lots of properties on it.

希望有所帮助。

欲了解更多信息，请阅读创建和触发事件

For more info read Creating and Triggering Events

至于你的第3个问题，现在你应该知道你不能这样做，因为 e 仅在事件发生时存在。您可以拥有处理程序函数，该函数在执行时可以访问 e 对象，将其存储在某个全局变量中并对其进行处理。

As for your 3rd question, now you should know you cannot do that, because e only exists when an event happens. You could have the handler function, which has access to the e object when it gets executed, to store it in some global variable and work on that.

[1]这不完全正确，但理解起来更简单。更正确的说法是向你知道会让事件流经它的元素添加一个事件监听器。有关详细信息，请参见此

[1] That is not exactly correct, but it's simpler to understand. The more correct thing to say there is "add an event listener to the element you know will have events flow through it". See this for more information

这篇关于参数e（事件）究竟是什么以及为什么将它传递给JavaScript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！