10

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

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

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

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

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

非常感谢。

4

5 回答 5

13

永远存在的事件，不管你喜不喜欢

即使您不提供名称，该事件也始终存在：

$(".foo").on("click", function(){
  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(event){
  alert( event.target.id );
});

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

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

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

于 2012-04-18T22:05:39.263 回答
4

您没有在event任何地方传递参数。您只是在制作一个带有一个参数的函数，称为event.

当浏览器调用事件处理程序时，它会调用分配给它的函数，并将event对象作为第一个参数传递给它。

PS你不需要()你的功能。

document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};
于 2012-04-18T22:07:37.813 回答
4

您没有将事件传递给函数，而是命名传递给函数的第一个参数event。

浏览器将调用您的函数，并在调用您的函数时传递一个事件对象。您可以选择不命名该参数function(){}，但浏览器仍将传递事件对象，您可以根据需要使用或不使用它。

于 2012-04-18T22:08:06.360 回答
0

要添加到其他答案和评论，您的代码将不适用于 IE。对于跨浏览器功能，您需要测试第一个参数的存在：

<body>
  <button id="button_1">Click Me!</button>
  <script type="text/javascript" >
    document.getElementById('button_1').onclick = (
      function(event) {
        var e = event ? event : window.event;
        alert("The event is: " + "on" + e.type);
      });
  </script>
</body>
于 2012-04-18T22:20:21.440 回答
0

简单地说，传递给处理程序的事件对象包含有关事件的详细信息。例如，aKeyboardEvent包含有关按下的键、相应字符和任何被按住的修饰键（alt、shift、control、meta）的信息。

事件处理程序是否尝试在分配事件之前传递它？

处理程序是您的函数，因此它是 的接收者event，而不是传递者。

  • 当您将事件处理程序分配给元素的onclick属性（或通过调用addEventListener现代的首选方法）时，事件处理程序被绑定，这是在调用处理程序之前。
  • Event 对象在调用处理程序时传递，即事件触发时。

因此，当用户单击您#button_1的MouseEvent.

有关更多信息，请阅读事件驱动编程。

于 2012-04-18T22:12:50.883 回答