为什么必须将事件对象作为参数传递?

2022-01-15 00:00:00 events event-handling javascript javascript-events

我正在学习如何在 JavaScript 中操作事件，我想知道为什么在使用事件处理时必须将事件对象作为参数(参数)传递给函数?"

I'm learning how to manipulate events in JavaScript and I'm wondering "why do you have to pass the event object as a parameter (argument) into a function when using event handling?"

下面是我所说的一个例子:

Here's an example of what I am talking about:

<script type="text/javascript">
    document.getElementById('button_1').onclick = (function (event) {
        alert("The event is: " + "on" + event.type);
    });
</script>

我编写了上面的代码，我非常了解它的作用.我只是不明白整个(事件)的传递.我认为这是将匿名函数分配给 button_1.onclick 事件处理程序的一种方式.事件处理程序是否尝试在分配事件之前传递它?...我很难理解这一点.如果有人可以为我澄清这一点，我将不胜感激.

I wrote the code above and I pretty much understand what it does. I just don't understand the whole (event) passing. I thought of this as a way of assigning an anonymous function to the button_1.onclick event handler. Does the event handler try to pass in an event before it gets assigned or?... I'm having a difficult time understanding this. If someone could please clarify this for me I would be grateful.

[我尝试在 Google 上搜索它，但发现了非常复杂的解释和示例.只有简单到中级的解释会有所帮助.] =)

非常感谢.

推荐答案

无论你喜不喜欢，一直存在的事件

事件始终存在，即使您不提供名称:

The Ever-Present Event, Whether You Like it or Not

The event is always present, even when you don't provide a name:

$(".foo").on("click", function(){
  alert( arguments[0].type );
});

这和这样说是一样的:

$(".foo").on("click", function(event){
  alert( event.type );
});

事件对象已经被传递给您的回调(无论您是否为它提供名称)，如果您愿意，您可以选择不使用它.例如，如果我们查看 jQuery onClick 方法:

The event object is already being passed to your callback (whether your provide a name for it or not), you can choose to not use it if you like. For instance, if we looked to a jQuery onClick method:

$(".foo").on("click", function(){
  /* Do stuff */
});

利用它

您会注意到我的回调中没有引用事件对象.我不需要.但是，如果我想使用它，无论出于何种目的，我都应该给它一个名字:

Making Use of It

You'll note that I have no event object referenced in my callback. I'm not required to. However, if I want to use it, for whatever purpose, I should give it a name:

$(".foo").on("click", function(myEvent){
  myEvent.preventDefault();
  myEvent.stopPropagation();
});

现在我已授予自己访问事件详细信息的权限，我可以防止该事件导致的默认行为，并且我还可以阻止该事件将 DOM 冒泡到其他元素.

Now that I have granted myself access to the event details, I can prevent the default behavior that would result from the event, and I can also stop the event from bubbling up the DOM to other elements.

假设我们想监听一个元素的点击事件:

Suppose we wanted to listen for click events on an element:

$("#bigSquare").on("click", function(event){
  /* Do something */
});

当您单击元素本身或其任何子元素时，单击事件会在元素上发生.现在假设这个元素有两个孩子:

Click events happen on an element when you click the element itself, or any of its children. Now suppose this element had two children:

<div id="bigSquare">
  <div id="redSquare"></div>
  <div id="blueSquare"></div>
</div>

点击其中任何一个，大方块、红色方块或蓝色方块都会在大方块上引发点击"事件——在它引发您首先点击的任何元素的点击事件之后(事件在 DOM 中冒泡).

Clicking any of these, the big square, the red square, or the blue square will cause the "click" event on the big square - after it causes the click event on whichever element you clicked first (events bubble up the DOM).

我们可以通过事件本身来确定在任何点击事件中哪个元素是目标:

We could determine which element was the target in any click event via the event itself:

$("#bigSquare").on("click", function(event){
  alert( event.target.id );
});

请注意这里我们如何访问引发事件的目标的 ID.如果您单击红色方块，当该事件冒泡到大方块时，我们将看到警报redSquare".蓝色方块也是如此.如果您点击它，该事件将冒泡到大方块，我们将看到警报blueSquare".

Note here how we're accessing the ID of the target that raised the event. If you click on the red square, when that event bubbles up to the big square, we will see alerted "redSquare". The same goes for the blue square. If you click that, the event will bubble up to the big square and we will see alerted "blueSquare".

您可以通过以下演示在线测试:http://jsbin.com/ejekim/编辑#javascript,live

You can test this online via the following demo: http://jsbin.com/ejekim/edit#javascript,live

尝试点击橙色、红色或蓝色方块以查看警报内容.

Try clicking the orange, red, or blue square to see what is alerted.

相关文章