DOM 事件顺序

2015年12月18日，更新：

mouseover会传播(bubble)，mouseenter不会；

mouseout会传播(bubble)，mouseleave不会；

而且此顺序与事件的注册顺序无关。

部分DOM事件顺序：

Focus Event Order（Focus 事件顺序）

The focus events defined in this specification occur in a set order relative to one another. The following is the typical sequence of events when a focus is shifted between elements (this order assumes that no element is initially focused):

此规范定义的focus事件发生在一组相对顺序中。如下是当focus在元素间转移的时候（此顺序假设无初始focus元素）的事件顺序。

Event NameNotes

                        User shifts focus

1.focusin    Sent before first target element receives focus

2.focus    Sent after first target element receives focus

                        User shifts focus

3.focusout    Sent before first target element loses focus

4.focusin    Sent before second target element receives focus

5.blur    Sent after first target element loses focus

6.focus    Sent after second target element receives focus

Mouse Event Order（鼠标事件）

Certain mouse events defined in this specification must occur in a set order relative to one another. The following shows the event sequence that must occur when a pointing device's cursor is moved over an element:

此规范定义的肯定的鼠标事件必须发生在相对顺序中。如下事件顺序当且仅当在指针设备的鼠标移过某个元素：

Event NameElementNotes

1.mousemove

                                Pointing device is moved into element A...

2.mouseover    A

3.mouseenter    A

4.mousemove    A    Multiple events

                                Pointing device is moved out of element A...

5.mouseout    A

6.mouseleave    A

When a pointing device is moved into an element A, and then into a nested element B and then back out again, the following sequence of events must occur:

当指针设备移动到元素A，而后进入到内嵌元素B，而后再返回到A，发生的事件顺序以下：

Event NameElementNotes

1.mousemove

                                        Pointing device is moved into element A...

2.mouseover    A

3.mouseenter    A

4.mousemove    A    Multiple events

                                        Pointing device is moved into nested element B...

5.mouseout    A

6.mouseover    B

7.mouseenter    B

8.mousemove    B    Multiple events

                                        Pointing device is moved from element B into A...

9.mouseout    B

10.mouseleave    B

11.mouseover    A

12.mousemove    A    Multiple events

                                        Pointing device is moved out of element A...

13.mouseout    A

14.mouseleave    A

Sometimes elements can be visually overlapped using CSS. In the following example, three elements labeled A, B, and C all have the same dimensions and absolute position on a web page. Element C is a child of B, and B is a child of A in the DOM:

有时候元素可经过CSS重叠在一块儿。如下示例，三个元素A，B和C在页面都有相同的维度及绝对定位。C为B的子元素，B是A的子元素：

When the pointing device is moved from outside the element stack to the element labeled C and then moved out again, the following series of events must occur:

当鼠标从元素栈外移动到元素C，再移出去，发生的事件顺序以下：

Event NameElementNotes

1.mousemove

                                        Pointing device is moved into element C, the topmost element in the stack

2.mouseover    C

3.mouseenter    A

4.mouseenter    B

5.mouseenter    C

6.mousemove    C    Multiple events

                                     Pointing device is moved out of element C...

7.mouseout    C

8.mouseleave    C

9.mouseleave    B

10.mouseleave    A

The following is the typical sequence of events when a button associated with a pointing device (e.g., a mouse button or trackpad) is pressed and released over an element:

如下是按钮按下及释放的时候发生的事件顺序：

Event NameNotes

1.mousedown

2.mousemoveoptional, multiple events, some limits

3.mouseup

4.click

5.mousemoveoptional, multiple events, some limits

6.mousedown

7.mousemoveoptional, multiple events, some limits

8.mouseup

9.click

10.dblclick

Keyboard Event Order（键盘事件）

The keyboard events defined in this specification occur in a set order relative to one another, for any given key:

Event NameNotes

1.keydown

2.beforeinput(only for keys which produce a character value)

Any default actions related to this key, such as inserting a character in to the DOM.

3.input(only for keys which have updated the DOM)

Any events as a result of the key being held for a sustained period (see below).

4.keyup

If the key is depressed for a sustained period, the following events may repeat at an environment-dependent rate:

Event NameNotes

1.keydown(with repeat attribute set to true)

2.beforeinput(only for keys which produce a character value)

Any default actions related to this key, such as inserting a character in to the DOM.

3.input(only for keys which have updated the DOM)

未完待续。

参考 http://www.w3.org/TR/DOM-Level-3-Events/