47

当我开始做 Web 开发时,我意识到 Javascript 事件名称都是小写的,没有分隔符,即"mousedown""mouseup"等。在使用 jQuery UI 库时,我注意到它们也使用相同的约定;即“dropdeactivate”,如下例所示

$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} )

虽然这适用于只有 2 或 3 个单词的名称,但对于包含更多单词的名称来说真的很糟糕。

尽管如此,当我必须触发我创建的自定义(合成)事件时,我也遵循了这个约定,直到最近我决定最好开始使用某种形式的分隔符。现在我使用类似"drop:deactivate""app:ready"的东西。

在 iOS 上,苹果最近为 HTML 5 Airplay API 添加了这个事件,我同意这篇文章的作者http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review他说:

我认为“webkitcurrentplaybacktargetiswirelesschanged”赢得了记录:有史以来最长的 JavaScript 事件名称

这个奇怪的约定背后的原因是什么?为什么不使用任何形式的分隔符或 camelCase 约定以更易读的方式命名事件?

我认为这是有原因的,很多聪明的人都在做这个……但过了一段时间我仍然想知道为什么?

4

4 回答 4

29

不幸的是,当您处理遗留约定时,它并不是那么简单。DOM 事件背后有很多历史。

以下是在 DOM2 事件规范中定义Event的 type 属性的方式:

接口事件(在 DOM Level 2 中引入)
类型(DOMString 类型,只读)

事件的名称(不区分大小写)。该名称必须是 XML 名称。

我想,这背后的原因是在同一个文档中的这一段解释的:

在 HTML 4.0 中,事件侦听器被指定为元素的属性。[...] 为了实现与 HTML 4.0 的兼容性,实现者可以将表示事件处理程序的属性设置视为在 EventTarget 上创建和注册 EventListener .

现在,虽然 DOM3 中的立场发生了变化(其中事件名称区分大小写),但我认为最初的方法通常被认为是最安全的选择——因此不必依赖用户代理的正确性(检查这个讨论这个有趣的问题作为例子)。

请注意,W3C 本身已经在 DOM2 中注册了大量的 PascalCased 事件(所有 MutationEvents DOMActivateDOMFocusInDOMFocusOut)。

于 2013-09-28T21:23:32.497 回答
8

据我所知,没有关于该主题的官方惯例。在我看来,由于 camelCase 是 js 中普遍接受的名称标准,因此同样适用于事件命名。但是,正如您所指出的,js 本身和许多库却不然。我已经看到伟大的程序员使用这两种约定,所以我相信它根本无关紧要。在“有史以来最长的 JavaScript 事件名称”的情况下,这是一个应该使用 camelCase 的事件的一个很好的例子,在我看来......或者他们可能只是缩短了它:)

如果您想坚持经常看到的内容,请使用小写字母。如果您认为这对眼睛不利(我确实如此),请使用 camelCase。如果您尝试符合标准,我可能不会使用其他任何东西。

于 2013-09-28T21:11:44.250 回答
5

我喜欢 Bootstrap 的工作方式: hidden.bs.modal

但是:正如@raina77ow 的回答中提到的,您应该遵循 DOM2 规范。

该规范提到了以下 XML 命名指南: https ://www.w3.org/TR/1998/REC-xml-19980210#NT-Name

从我收集到的:

  • 尽可能使用小写字母
  • 您可以使用这些字符中的任何一个来帮助命名空间 . - _ :
  • 我会使用其中任何一个。大概是这样apporlibraryname:componentname.eventtype

我对他的推理是因为有时你有可能是完全独立的小部件的单独的应用程序或库。一目了然,很容易确定这个事物事件的位置,a: 组件在 a 之前,.因为大多数组件都是作为对象编写的。

于 2020-05-06T17:41:45.027 回答
1

当谈到约定时,它在某种程度上是一种习惯,JavaScript 框架似乎遵循 JavaScript DOM 事件 API 的约定,我不知道是否有原因或至少有一个明确的原因,但是就是这样。对于一般约定,crockford是最好的参考之一,但没有提及事件命名,但同时这里的事件似乎有点不同,这让我认为这是一个选择问题,不多不少

于 2013-09-28T21:12:21.987 回答