为什么必须传递事件对象作为参数？ [英] Why do you have to pass the event object as a parameter?

问题描述

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

这是我正在谈论的一个例子：

 < script type =text /的javascript> 
 document.getElementById（'button_1'）。onclick =（function（event）{
 alert（事件是：+on+ event.type）; 
}）; 
< / script> 
  

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

[我尝试在Google上搜索，但发现了非常复杂的解释和示例。只有一个简单的中间解释才有帮助。] =）

非常感谢。

解决方案

无论你喜欢还是不喜欢永远的事件

事件始终存在，即使你不提供一个名字：

  $（。foo）。on（click，function $ b alert（arguments [0] .type）; 
}）; 
  

这样说：

  $（。foo）。on（click，function（event）{
 alert（event.type）; 
}）; 
  

事件对象已被传递给您的回调（无论您的提供一个名称或不是），你可以选择不使用它，如果你喜欢。例如，如果我们查看一个jQuery onClick方法：

  $（。foo）。on（click function（）{
 / * Do stuff * / 
}）; 
  

使用它

请注意，我的回调中没有引用任何事件对象。我不需要。但是，如果我想使用它，为了任何目的，我应该给它一个名字：

  $（。foo ）.on（click，function（myEvent）{
 myEvent.preventDefault（）; 
 myEvent.stopPropagation（）; 
}）; 
  

现在我已经授予我自己访问的事件详细信息，我可以防止将导致的默认行为从事件，我也可以阻止事件从DOM冒泡到其他元素。

实际例子

假设我们想要听一个元素上的点击事件：

  $（＃bigSquare）。on（click ，function（event）{
 / * Do something * / 
}）; 
  

单击元素本身或其任何子项时单击事件。现在假设这个元素有两个孩子：

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

点击任意一个，大方块，红色方块或蓝色方块将导致点击大广场上的事件 - 在您首先点击的任何元素（事件冒泡的DOM）之后导致点击事件。

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

  $（＃bigSquare）。on（click，function事件）{
 alert（event.target.id）; 
}）; 
  

请注意，我们如何访问引发事件的目标的ID。如果您点击红色方块，那么当这个事件发生到大广场时，我们会看到提醒redSquare。蓝色广场也是如此。如果你点击这个，那么这个事件就会冒泡到大广场，我们会看到提醒blueSquare。

你可以通过以下演示在线测试： http://jsbin.com/ejekim/edit#javascript,live

尝试点击橙色，红色或蓝色方块，看看是什么。

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>

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.

[I tried searching it on Google but found very complex explanations and examples. Only a simple-to-intermediate explanation would help.] =)

Thank you very much.

解决方案

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 );
});

That is the same as saying this:

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

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();
});

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.

Practical Example

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>

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 );
});

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".

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.

这篇关于为什么必须传递事件对象作为参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！