Question

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

以下是我所谈论的一个例子：

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

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

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

非常感谢。

Answer 1

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

即使您没有提供姓名，事件也始终存在：

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

尝试点击橙色，红色或蓝色方块以查看提醒的内容。

Answer 2

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

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

P.S。您的功能周围不需要()。

document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};

Answer 3

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

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

Answer 4

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

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

处理程序是你的功能，所以它是event的接收者，而不是传球者。

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

因此，当用户点击您的#button_1时，会导致按钮触发“点击”事件，该按钮会调用按钮的“点击”处理程序，该处理程序将传递MouseEvent。< / p>

有关详情，请参阅event-driven programming。

Answer 5

要向其他人添加答案和评论，您的代码将无法与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>

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

5 个答案:

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

利用它

实践例子