javascript - Javascript：使用 Jquery 的 bind() 出价事件是否比简单地执行 onclick='bla()' 更好，为什么？

Question

使用 JQuery 的 bind() 绑定事件是否被认为比简单地执行 onclick='bla(this)' 更好，为什么？

谢谢 ！

Answer 1

因为Unobtrusive JavaScript (UJS)是新常态。

对我来说，将标记与行为分离是最大的好处，尽管它还有其他一些方便的东西，每个人喜欢不同的方面。

@Esailija 正确地指出，就工作级别、浏览器兼容性、浏览器变通方法等而言，jQuery 使 UJS 变得更加容易。UJS 不依赖于 jQuery，但 JS 库使其在更广泛的功能中可行。

Answer 2

使用 jQuery 事件，您可以获得价值 6 年的错误修复、事件对象的规范化、命名空间、对诸如 mouseenter、mouseleave、focusin 和 focusout 等事件的支持，这些事件最初是专有的 IE 事件和事件委托。

使用任何类型的 js（不仅仅是 jQuery）附加的事件，您将获得：

• 有用的对象上下文
• 有用的功能范围
• 能够为同一元素上的同一事件附加多个处理程序

如果您动态生成 html：

• 理智，因为您不必连接字符串来生成代码，您只需像任何其他代码一样编写事件处理程序代码，而不必担心您的字符串首先被解释为 javascript 字符串，然后被 html 解释为最终结果，并且然后作为javascript代码（是的，三个阶段。我什至在第一次修订时都没有得到以下权利）：

  var html = '<div onclick="alert(\''+someVar+'\'+\'hello\');"></div>'
  

  写起来并不容易。相比于

      $("<div>", {
          click: function () {
              alert(someVar + "hello");
          }
      });
  

Answer 3

根据我的经验，抽象是要付出代价的，应该权衡使用它们的好处。

就 jQuery 而言，我发现它为我节省的时间远远超过了任何缺点。举个例子，你将如何在标准 javascript 中编写以下示例。

$("ul").on("click", "li", function(){ });

这个 jQuery方法将一个事件处理程序附加到所有当前和未来的 li 元素。

实现此功能并非易事，通过使用 jQuery，您正在使用高质量的代码库，该代码库试图抽象浏览器差异并帮助您专注于编程。