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

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

尝试单击橙色,红色或蓝色方块以查看提醒的内容.