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/