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

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

javascript events

Javascript 为什么必须将事件对象作为参数传递？,javascript,events,javascript-events,event-handling,Javascript,Events,Javascript Events,Event Handling,我正在学习如何在JavaScript中操作事件，我想知道“为什么在使用事件处理时必须将事件对象作为参数（参数）传递给函数？” 下面是我所说的一个例子： <script type="text/javascript"> document.getElementById('button_1').onclick = (function (event) { alert("The event is: " + "on" + event.type); }); </

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

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

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


document.getElementById（'button_1'）。onclick=（函数（事件）{
警报（“事件为“+”on“+事件类型”）；
});

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

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

非常感谢。

无论您喜欢与否，这是一次千载难逢的活动事件始终存在，即使您没有提供名称：

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

注意这里我们是如何访问引发事件的目标的ID的。如果你点击红场，当这个事件出现在大广场上时，我们会看到警告的“红场”。蓝色广场也是如此。如果你点击这个按钮，活动将在大广场上进行，我们将看到“blueSquare”提醒

您可以通过以下演示进行在线测试：

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

您没有在任何地方传递

事件。您只需要创建一个函数，该函数接受一个参数，称为事件

当浏览器调用事件处理程序时，它调用分配给它的函数，并将事件
对象作为第一个参数传递给它
另外，你的函数不需要（）

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

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

浏览器是要调用函数的浏览器，它在调用函数时传递事件对象。您可以选择不命名该参数function（）{}
，但浏览器仍将传入事件对象，您可以使用它，也可以不使用它，因为您认为合适。
简单地说，传递给处理程序的事件对象包含有关事件的详细信息。例如，a包含有关按下的键、相应的字符和任何按下的修改键（alt、shift、control、meta）的信息
事件处理程序是否在分配事件之前尝试传入事件，或者
处理程序是您的函数，因此它是事件的接收者，而不是传递者

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

因此，当用户单击您的#button_1
时，会在按钮上触发一个“click”事件，该事件调用按钮的“click”处理程序，该处理程序会传递一个消息
有关详细信息，请阅读。
若要添加到其他答案和注释中，您的代码将无法与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>


点击我！
document.getElementById（'button_1'）。onclick=(
功能（事件）{
var e=事件？事件：window.event；
警报（“事件为“+e.type”上的“+”）；
});
所以它会是这样的：如果（event.xcord==500&&event.ycord==500）{alert（“你在房间的中心”）；//更多代码}否则{alert（“你不在房间的中心”）；//更多代码}不是这些名字，但是的，沿着这些思路。@W3Geek我在回答的开头添加了一个重要的信息，应该可以为您澄清问题。@W3Geek捕获和冒泡是截获事件的两种方式。当引发事件时，它可以从DOM的内部移动到外部。这是冒泡。它使DOM“冒泡”。事件也可以从外部传播到内部。这样做时，它们可能会被“捕获”。回调只是一个响应事件的函数。@W3Geek捕获在不同浏览器之间可能略有不同。例如，某些浏览器在窗口
之前不会注册事件。捕获意味着事件从
开始，然后进入
，然后通过每个元素，直到到达触发它的元素。冒泡是指事件从触发元素开始，向另一个方向移动，在顶部结束（
，文档或窗口）。说明：这是有道理的。我没有得到的部分是，当我不选择命名该参数时，代码会中断并且不起作用。。
<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>