草庐IT

javascript - 在 anchor 上执行 Javascript 的最佳方式

coder 2024-05-12 原文

通常，有 3 种方式(据我所知)可以从 <a/> 执行 javascript标签:

1) 使用onclick() :

<a href="#" onclick="alert('hello'); return false">hello</a>

2) 直接链接:

<a href="javascript:alert('hello')">hello</a>

3) 或外部附加:

// In an onload event or similar
document.getElementById('hello').onclick = window.alert('Hello'); 
return false;
<a id="hello" href="#">hello</a>

我实际上是通过 AJAX 加载链接，所以 #3 基本上已经过时了。那么，做#1 或#2 还是完全不同的事情更好？还有，为什么？我应该注意哪些陷阱？

另外值得注意的是， anchor 实际上没有链接到任何地方，因此 href="#" , 我正在使用 a所以样式符合，因为这仍然是一个要单击的对象，并且按钮在上下文中不合适。

谢谢

最佳答案

如果您通过 ajax 加载内容并需要连接事件处理程序，那么您有以下选择:

  1. 使用您的选项 1) 或 2) 在您的 HTML 中放置一个 javascript 处理程序。在我看来，选项 1) 是一种更清晰的指定方式，但我认为 1) 或 2) 之间没有太大区别——它们本质上都是做同样的事情。我一般不喜欢这个选项，因为我认为将标记和代码分开是有值(value)的。
  2. 使用 ajax 加载内容后，调用一些本地代码来查找并连接所有链接。如果 HTML 在您的页面中是静态 HTML，那么这将是您在页面中拥有并在 DOMReady 上执行的相同类型的代码。我会使用 addEventListener(回到 attachEvent)以这种方式连接，因为它更干净地允许单个对象的多个监听器。
  3. 在使用 ajax 加载内容后调用一些代码，找到所有链接并将点击连接到一些通用的点击处理程序，然后可以检查链接中的元数据并根据元数据。例如，此元数据可以是点击链接的属性。
  4. 加载内容时，还要加载可以单独查找每个链接的代码，并为每个链接连接适当的事件处理程序，就像内容只是在常规页面中加载一样。这将满足将 HTML 与 JS 分开的愿望，因为 JS 会找到每个合适的链接并使用 addEventListener 或 attachEvent 为它连接一个事件处理程序。
  5. 与 jQuery .live() 的工作方式非常相似，在文档级别为未处理的链接点击连接一个通用事件处理程序，并根据链接中的某些元数据分派(dispatch)每次点击。
  6. 运行一些使用实际框架(例如 jQuery 的 .live() 功能)的代码，而不是构建您自己的功能。

我会使用哪种取决于具体情况。

首先，在附加事件处理程序的三个选项中，我会使用新选项 #4。我会使用 addEventListener(对于旧版本的 IE 回退到 attachEvent)而不是分配给 onclick，因为这更干净地允许一个项目上的多个监听器。如果是我，我会使用一个使跨浏览器兼容性不可见的框架(jQuery 或 YUI)。这允许完全分离 HTML 和 JS(没有 JS 与 HTML 内联)，我认为这在任何涉及多人的项目中都是可取的，而且对我来说似乎更干净..

然后，我将使用上面的哪个选项来运行连接这些事件监听器的代码，这对我来说只是一个问题。

如果我动态加载了很多不同的 HTML 片段，如果它们都是“独立的”并且可以单独维护的话会更清晰，那么我会想同时加载 HTML 和相关代码，所以让新加载的代码句柄连接到它的适当链接。

如果因为只有几个片段要加载并且处理它们的代码可以预先包含在页面中，所以并不是真的需要一个通用的独立系统，那么我可能只是在HTML 片段是通过 ajax 加载的，以使 javascript 连接到刚刚加载的片段中的链接。这将保持 HTML 和 JS 之间的完全分离，但很容易实现。您可以在每个片段中放置某种关键对象，以标识要调用的 JS 片段或可以用作传递给 JS 的参数，或者 JS 可以检查片段以查看哪些对象可用并连接到以在场者为准。

关于javascript - 在 anchor 上执行 Javascript 的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7516235/

javascriptcode的sectiononclick

有关javascript - 在 anchor 上执行 Javascript 的最佳方式的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  3. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串？ - 2

    我试图获取一个长度在1到10之间的字符串，并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符，然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  4. 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

  5. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  6. ruby - 为什么 Ruby 的 each 迭代器先执行？ - 2

    我在用Ruby执行简单任务时遇到了一件奇怪的事情。我只想用每个方法迭代字母表，但迭代在执行中先进行:alfawit=("a".."z")puts"That'sanalphabet:\n\n#{alfawit.each{|litera|putslitera}}"这段代码的结果是:(缩写)abc⋮xyzThat'sanalphabet:a..z知道为什么它会这样工作或者我做错了什么吗？提前致谢。 最佳答案 因为您的each调用被插入到在固定字符串之前执行的字符串文字中。此外，each返回一个Enumerable，实际上您甚至打印它。试试

  7. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  8. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

随机推荐