Javascript：将事件附加到JS中的元素或具有元素调用函数

Question

在“简单”网站上哪种做法更好。 （很少有javascript动作）

a：将事件/动作/功能附加到元素上（div / span /...)

就像这个按钮和点击事件如何添加到某个div：

$( "#create-user" )
  .button()
  .click(function() {
  $( "#dialog-form" ).dialog( "open" );
  });

b：或者在行中有元素动作调用函数。

<div id=calc onclick="doCalcFunc(this)">calc something</div>

有人质疑来自更多OO背景的人，java / c＃，所以发现更喜欢B，简单易于发现正在发生的事情。也许它可能只是在网络调试工具上学习更多，但是能够点击转到元素上的源，并且看到，哦，当你点击这个元素时，它将运行函数X.至于方法“A”，我必须在源代码上搜索某些函数，这些函数可能附加到元素ID，类型，类或元素的其他指示符。

Answer 1

即使对于一个简单的网站，选项A 中显示的格式也会更好，因为它会从HTML标记中分离出代码。这也是Unobtrusive JavaScript的主要原则之一。

根据我的经验，使用HTML DOM或类似JQuery的框架替换和修改附加到元素的事件要容易得多，然后在标记中替换多行内联代码。我工作的大多数网站都有动态生成的内容，使用内联函数维护所有代码会很麻烦。

此外，选项A（将事件附加到元素上）还允许您使用各种功能，如匿名函数和各种样式的closures。在选项B中，需要在doCalcFunc元素之前定义div才能工作。使用选项A，可以在将函数附加到div的事件时定义该函数。这使得最初编码和将来维护站点具有更大的灵活性。

Answer 2

虽然我大部分时间都会使用基于JS的处理程序赋值，但有些时候处理程序属性可以很好地工作。

重要的是不要丢弃任何潜在的工具，而是要了解这两种技术的优缺点，我将在下面列出这些技巧。我打算尝试给每个＆＃34; con＆＃34;一个可以考虑的对应点。

---

元素属性处理程序

赞成

• 处理程序在创建节点（零延迟）后立即可用。
• 分配非常简单，并且具有极其广泛的跨平台支持。
• 为不与CSS 重叠的元素提供一个钩子（使用样式和行为的类）
• 附加到元素的行为标记的即时可见性。

缺点

• 混合行为和演示。
  • 计数器：虽然这是真的，但在嵌入大量JavaScript时，这只是一个问题。单个函数调用并不比向元素添加类更突兀。
• 每个事件的代码都是eval。
  • 计数器：这个实际上不是真的，但它通常被称为骗局，我以为我会把它包括在内。事实是，当页面加载时，它就会eval一次，就像其他JavaScript一样。
• 如果有多个元素具有相同的处理程序，则无法共享函数，而是每个元素都获得一个唯一的函数。
  • 计数器：这是真的。即使函数调用相同，每个事件也会为每个元素创建一个新函数。但是，如果有多个共享相同的处理程序，则可以为事件委派提供案例。
• 高维护。必须更改函数意味着标记的更改才能匹配。
  • 计数器：这是事实，虽然在JavaScript代码中添加处理程序可能会遇到与类名更改类似的问题，或者标记更改会破坏DOM选择。
• 每个事件类型每个元素只能分配一个处理程序。
  • 计数器：这是事实，虽然你可以有一个调用其他函数的泛型函数，有点类似于jQuery的工作方式。
• 可能与JavaScript中分配的处理程序发生冲突。分配onclick="foo()"属性时，您实际上正在为element.onclick分配功能。由于每个元素只能分配一个，因此对JS中属性的任何更改都将覆盖您的处理程序。
  • 计数器：这是真的。虽然这肯定需要考虑，但它不应该被用作完全解雇内联或.onclick处理程序的理由。有很多情况下不存在冲突。

---

在JavaScript代码中分配的jQuery处理程序

赞成

• jQuery使它非常简单和兼容。
• 不直接将JavaScript与标记混合。
• 对处理程序的更改完全在JavaScript中完成，并且在涉及多个元素时不太可能需要重复更改。
• 内置浏览器兼容性修补程序。

缺点

• 如果在DOM准备就绪后分配了处理程序，则可能存在一段时间内元素可见而没有其JavaScript行为。
  • 计数器：虽然这是真的，但这通常不是问题。如果您通过慢速连接发送大页面，那么它可能是最相关的。在这些情况下，您可以将脚本嵌入到元素附近，而不是等待整个DOM。
• 需要过于复杂的DOM-ready解决方案。
  • 计数器：不是真的。虽然有些人选择使用此类解决方案，但没有理由将分配处理程序的脚本放在页面底部。
• 将第一个处理程序添加到元素时，jQuery实际上会生成另一个函数，即使实际处理程序在多个元素之间共享也是如此。
  • 计数器：虽然这是真的，但仅适用于分配给元素的第一个处理程序。分配的其他处理程序可以分享＆＃34;引擎盖下的＃34;一个jQuery制作的，所以额外的开销只在第一个元素上。
• 有自己的＆＃34;突兀的＆＃34;问题，JavaScript和CSS团队都可以使用类，允许一个或另一个通过类更改来中断代码。
  • 计数器：虽然这是真的，但在这种情况下，多个类可以与命名约定一起使用，为每个团队提供不干涉指示。
• 标记中的行为不可见。
  • 计数器：如果类专门用于处理程序分配，并且使用了良好的命名约定，它们可以像内联处理程序一样具有描述性。
• 为JavaScript添加一个类与添加内联处理程序同样具有突兀性。
  • 计数器：尽管做class="click_handler"与使用设计良好的DOM进行onclick="handler(this)"有很大不同，但它确实如此...＆＃39很可能你根本不需要上课就可以完成任务。 （虽然您在标记中失去了可见性优势。）

---

因此，在努力避免任何一种宗教信仰遵循任何一种方法的同时，我试图提供一些关于某些考虑因素的概述。

虽然您可能会发现自己使用更流行的DOM-ready方法来分配处理程序，但在某些情况下，内联处理程序可以很好地满足要求，尤其是在零延迟方面非常重要的情况下。