javascript / DOM事件名称约定 [英] javascript/DOM event name convention

问题描述

当我开始做网页开发时，我发现javascript事件的名字都是小写的，没有分隔符，即mousedown，mouseup等。而当使用jQuery UI库时，我注意到他们也使用相同的约定;即dropdeactivate，如以下示例

Hi when I started doing web development, I realized javascript event names were all in lower case with no separators, i.e. "mousedown", "mouseup", etc. And when working with the jQuery UI library, I noticed they also use the same convention; i.e. "dropdeactivate" as in the following example

javascript
$（.selector）。 on（dropdeactivate，function（event，ui）{}）


虽然这对于只有2或3个字，对于有更多单词的名字真的很可怕。

While this works well for names that are only 2 or 3 words, it is really awful for names with more words on it.

尽管如此，当我必须触发我创建的自定义（合成）事件时，我也遵循该约定，直到最近我决定开始使用某种形式的分离器。现在我在iOS上使用像drop：deactivate或app：ready。

Despite of this I followed that convention too when I have to fire custom (synthetic) events that I created, until recently when I decided it was better to start using some form of separator. Now I use something like "drop:deactivate", or "app:ready".

最近为HTML 5 Airplay API添加了这个活动，我同意这篇文章的发表者 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review 他说：

on iOS apple recently added this event for the HTML 5 Airplay API, and I agree with the autor of this post http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review when he says:

我认为webkitcurrentplaybacktargetiswirelesschanged赢得了记录：最长的JavaScript事件名称。

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

What is the reason behind this weird convention? why not use any form of separator or camelCase convention to name the events in a more readable way?

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

I think there is a reason for that, lot of clever people worked on this... But after a while I'm still wondering why?

推荐答案

不幸的是，当处理旧约时，并不那么简单。 DOM事件在他们背后有很多历史。

Unfortunately, it's not so simple when you deal with legacy conventions. And DOM Events have a lot of history behind them.

以下是事件在DOM2事件规范中定义：

Here's how type attribute of Event is defined in DOM2 Events specification:

接口事件（在DOM级别2中引入）

类型（类型为DOMString，只读）

Interface Event (introduced in DOM Level 2)
type (of type DOMString, readonly)

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

The name of the event (case-insensitive). The name must be an XML name.

我认为这一点的推理在同一个文档中由本段解释： / p>

The reasoning behind this, I suppose, is explained by this paragraph in the same doc:

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

In HTML 4.0, event listeners were specified as attributes of an element.[...] In order to achieve compatibility with HTML 4.0, implementors may view the setting of attributes which represent event handlers as the creation and registration of an EventListener on the EventTarget.

现在，DOM3中的立场发生了变化（事件名称为区分大小写），原来的方法是，我认为被认为是最安全的下注 - 所以不必依赖于用户代理的正确性（检查这个讨论和这个有趣的问题作为例子）。

Now, while the stance has changed in DOM3 (where event names are case-sensitive), the original approach is, I suppose, ofter considered to be the safest bet - so one won't have to depend on user agents' correctness (check this discussion and this funny issue as examples).

请注意，W3C本身在DOM2中注册了一大堆CamelCase事件（所有的MutationEvents， DOMActivate ， DOMFocusIn 和 DOMFocusOut ）。

Note that W3C itself has registered a whole slew of CamelCased events in DOM2 (all the MutationEvents, DOMActivate, DOMFocusIn and DOMFocusOut).

这篇关于javascript / DOM事件名称约定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！