javascript / DOM事件名称约定

Question

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

javascript $( ".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约定来以更易读的方式命名事件？

我认为这是有原因的，很多聪明的人都在努力......但过了一段时间我还在想为什么？

Answer 1

不幸的是，当您处理遗留约定时，这并不是那么简单。 DOM Events背后有很多历史。

以下是在DOM2 Events规范中定义Event的type属性的方法：

  

接口事件（在DOM级别2中引入）
   type （类型为DOMString，readonly）

     

事件的名称（不区分大小写）。名称必须是XML名称。

我想这背后的原因可以在同一个文档中解释：

  

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

现在，虽然DOM3中的立场发生了变化（事件名称为case-sensitive），但我认为最初的方法被认为是最安全的选择 - 因此人们不必依赖于用户代理商的正确性（以this discussion和this funny issue为例）。

请注意，W3C本身已经在DOM2中注册了大量的CamelCased事件（所有MutationEvents，DOMActivate，DOMFocusIn和DOMFocusOut）。

Answer 2

据我所知，这个问题没有正式的做法。在我看来，由于camelCase是js中普遍接受的名称标准，因此同样适用于事件命名。但是，正如您所指出的那样，js本身和许多库都会这样做。我已经看到了伟大程序员使用的两种惯例，所以我认为这简直无关紧要。在“有史以来最长的JavaScript事件名称”的情况下，这是一个应该使用camelCase的事件的一个很好的例子，在我看来......或者他们可能只是缩短了它：）

如果你想坚持你经常看到的内容，请使用小写字母。如果你觉得眼睛很难（我这么做），请使用camelCase。如果你想要符合标准，我可能不会使用任何其他东西。

Answer 3

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

但是： 如@ raina77ow的答案中所述，您应该遵循DOM2规范。

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

根据我收集到的信息：

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

我之所以这样说，是因为有时您有单独的应用程序或库，它们可能是完全独立的小部件。一目了然，使用:可以很容易地识别出此事件的发生位置，因为大多数组件都是作为对象编写的，因此组件在.之前。

Answer 4

当谈到约定时，它是一种习惯，JavaScript框架似乎遵循JavaScript DOM事件API的惯例，我不知道是否有原因或至少有明确的推理为什么，但它只是。 对于一般约定，crockford是最好的参考之一，但没有提到事件命名，但同时here事件似乎有点不同，这让我觉得作为一个选择的问题，不多也不少