草庐IT

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

coder 2024-05-17 原文

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

这是我正在谈论的例子:

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

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

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

最佳答案

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

事件始终存在，即使您不提供名称也是如此:

$(".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 */
});

当您单击元素本身或其任何子元素时，会在该元素上发生单击事件。现在假设这个元素有两个 child :

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

点击大方 block 、红色方 block 或蓝色方 block 中的任何一个都会在大方 block 上引发“click”事件——在它引发你首先点击的任何元素上的 click 事件之后(事件在 DOM 中冒泡) ).

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

$("#bigSquare").on("click", function(event){
  alert( event.target.id );
});

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

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

尝试单击橙色、红色或蓝色方 block 以查看提醒的内容。

关于javascript - 为什么必须将事件对象作为参数传递？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10218722/

javascript传递34codepreeventsevent-handlingdom-events

有关javascript - 为什么必须将事件对象作为参数传递？的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  3. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  4. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. ruby - RSpec - 使用测试替身作为 block 参数 - 2

    我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？ 最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere

  9. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  10. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

随机推荐