参数 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 是 event 的缩写

创建事件的最简单方法是单击页面上的某处.

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

当您点击时，会触发一个 click 事件.这个 event 实际上是一个包含关于刚刚发生的动作的信息的对象.在本例中，事件将包含诸如点击坐标(例如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(事件名称，处理程序).

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'(对于 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).

处理程序只是一个函数，它在事件发生时做一些事情(它被执行).默认情况下，处理程序函数在执行时传递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.

将 event 定义为处理函数的参数是可选的，但有时(大多数情况下)，处理函数了解发生的事件很有用.当你做定义它这就是你在你提到的函数中看到的e.记住，event 只是一个普通的 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.

希望有所帮助.

有关更多信息，请阅读创建和触发事件

至于您的第三个问题，现在您应该知道您不能这样做，因为 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屋！