3

在我对以下 SO 问题的回答中：事件绑定是什么意思？，我顺便说一句，使用 inline-JavaScript/Early-Binding 来绑定 JavaScript 事件“经常被误导”

例如：

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

我一直在争论标记中没有引用 JavaScript 的“后期绑定”方法，我认为这是已建立的最佳实践。然而，评论者声称在某些情况下需要使用它，我想知道这些可能是什么。

在不讨论两者的相对优点的情况下，任何人都可以想到任何情况要求您使用（例如）onclick属性而不是后期绑定方法。

4

3 回答 3

2

评论者断言，在某些情况下需要使用它

我想我是那些评论者之一。我实际上说的是内联侦听器“在某些情况下是一个合理的选择”。我不认为在任何情况下它是“必要的”（我在这种情况下理解为是必需的）。

添加内联侦听器只是在服务器上应用与在客户端上应用相同的逻辑来添加侦听器，并且具有以下优势：

  1. 标记可以创建和缓存或用作静态页面，下载页面时，每个客户端都不会一遍又一遍地添加侦听器
  2. 与可用元素和由 DOMReady 或 onload 函数或“底部脚本”添加的侦听器之间的延迟相关的问题已完全删除
  3. 移除了带有 onload 回退的各种“跨浏览器”DOMReady 函数的变幻莫测 - 如果不使用这些函数，则没有机会无法添加侦听器

当然这并不意味着所有的监听器都应该内联添加，动态添加监听器是垃圾，我只是指出它是解决某些问题的可行方法，并且在许多情况下是一个完全合理的解决方案。

如果您认为侦听器的“早期绑定”是好的，那么请尽早进行 - 将它们内联。:-)

PS。我还想我说过我不喜欢在这种情况下使用“绑定”，因为侦听器在任何真正意义上都没有绑定到元素。它们只是当元素接收到相关事件时调用的函数。唯一的绑定类型是侦听器的 this 关键字可以设置为引用相关元素（对于内联侦听器，这在所有浏览器中都是一致的，但对于以后添加的侦听器则不一定）。

于 2011-06-14T07:01:08.013 回答
2

onclick属性不好的原因：

onclick="foo()"

  • 您传入一串代码，当单击该元素时，该代码会在运行时进行评估。这是低效的，并且使用了eval
  • 您被迫将函数存储foo在全局范围内，从而污染了所有事件处理逻辑的全局范围。
于 2011-06-14T07:47:33.080 回答
1

我认为许多开发人员会因为无知或缺乏知识（当然，这很常见）而这样做，而其余的开发人员会这样做，因为使用 HTML-JS 属性比后期绑定更方便，如果你知道的话某些对象和功能总是加载在每个页面上，它们只会“存在”。

我认为当所说的 HTML 来自 AJAX 回调时尤其如此。举一个例子，AJAX 请求返回一个 HTML 响应，并且 HTML 被插入到页面中。现在，天真的开发人员会按照以下思路思考：

  • 我不知道响应 HTML 中有哪些元素，所以我不知道需要添加哪些后期绑定。
  • 也许我需要将它们全部添加以防万一！或者编写一些解析脚本来检测元素并绑定到我找到的元素？
  • 但是如果我需要绑定到不存在的东西怎么办？是时候编写一些长的内联 JavaScript 了！

所有这些都可以通过使用一种适用于页面上所有当前和未来元素的无所不在的绑定来消除。在 jQuery 中，等价于live(). 而不是写：

$('.foo').click(function(){...});

你可以写：

$('.foo').live('click', function(){...});

现在，所有类名为 'foo' 的元素都将在单击时执行该函数，包括当前不存在的元素。对于动态 AJAX 接口非常有用。

你可能已经知道了，但我只是指出 JS 属性可以做的任何事情，纯 JS 可以做得更好，我认为这是最佳实践。

于 2011-06-13T13:37:02.847 回答