将事件绑定到 <img /> 或 <a />？答案

【问题标题】：Bind event to <img /> or <a />?将事件绑定到 <img /> 或 <a />？
【发布时间】：2016-01-13 15:29:10
【问题描述】：

问题：
我不确定将通用事件绑定到内部标签还是外部标签在技术上是否更好。还涉及更深的嵌套标签。

方面：
是否使用更少的CPU？两者都有副作用吗？是否触发或多或少延迟？遗产？ this?

我/我们已经发现的：

变体示例 A：

<a href="#" onclick="function();">
  <img src="picture.jpg" />
</a>

变体示例 B：

<a href="#">
  <img src="picture.jpg" onclick="function();" />
</a>

以下内容相当不相关，但要求在 cmets 中作出解释：

"如果在图片周围加上<a> 标签有什么意义？您正在将 onclick 绑定到 <img> 标记？” - @Trug

关键是 SEO 友好的链接具有侧链效果的能力，例如带有警告的退出模式、退出过渡动画、分析事件，或者只是作为一种析构函数。

例子：

<a href="http://seo.friendly.url/deeplink.htm" 
   onclick="triggerSpecialAnalyticsForExample(); triggerExitModal();">link</a>

【问题讨论】：

如果您将 onclick 绑定到 <img> 标签，那么在图像周围加上 <a> 标签有什么意义？
@DanFromGermany 我没有投反对票...我只是问你一个问题
我可以想象不赞成投票的人会因为您没有详细说明代码背后的实际想法而感到恼火
这一切都不同了，尤其是事实证明你的一个例子根本不受支持。如果我们知道您要做什么，它可以节省我们的时间并为您提供更好的答案。对于 12K 代表，我很惊讶您会因为我们中的一些人在尝试回答之前质疑您的问题的背景而感到恼火。请阅读meta.stackexchange.com/questions/66377/what-is-the-xy-problem
我不能不加注释。您的问题对您来说似乎很简单，但不知道您要解决什么，我有很多建议。 * 如果 onload 很重要，那么示例 A 将不起作用。 * 如果您想使用链接的 onclick 来实现指针的单一副作用，那么您需要从 onclick 中返回 false 或者 - 清洁器 - 完全删除链接，使用图像的 onclick 并使用指针设置样式。 * 但是，这可能会给屏幕阅读器带来问题。我才刚刚开始。您能明白为什么您的问题可能不会被视为简单吗？

【解决方案1】：

简单 - 变体 B 一周中的每一天和 2 月 29 日 4 次。为什么？很简单 - 锚元素不支持加载事件，因此等待它需要非常很长时间。

出于各种原因，使用.addEventListener 将是一种将处理程序附加到元素的更好方法。

【讨论】：

请问您是不是很难理解这个问题？因为您的答案是完美的“ 不会触发 onload”。
你在上面的评论中说“这只是一个例子，可以用任何事件代替”，所以这没有意义。 onload 是否与您的问题相关？
@DanFromGermany - 当然。不-您试图找出的内容似乎非常简单。这是一个有点奇怪的问题（原来的问题），我可以想象有人在 ping 它，因为你可以在一两分钟内自己调查这两种方法，并发现自己有一种方法行不通——这将使它符合“确实”的条件不显示任何研究努力”的否决建议。这里的成员也往往不喜欢理论问题，更喜欢非常具体、有形的问题。无需给出怀疑的理由，对于某些人来说，这似乎有点太抽象了。
@j08691 - 我怀疑不是，虽然不能说清楚。我想我在这里闻到了轻微的 X/Y 气味。
这个问题的答案将以评论的形式出现，询问"What are you trying to achieve or avoid? Is this for a particular situation or are you wondering in general?" 幸运的是，onload 是问题的一部分，这使得回答变得微不足道。如果没有明确的问题目的，我真的不可能确定任何给定的答案都会令人满意。是的，我知道——这可能不是您期望或喜欢的答案。正如我之前所说，我发现这是一个奇怪的问题，如果没有任何上下文，似乎无法明确回答......