码迷,mamicode.com
首页 > 其他好文 > 详细

DOM 事件顺序

时间:2015-06-26 19:57:24      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

?部分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 Name Notes

                        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 Name Element Notes

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 Name Element Notes

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 Name Element Notes

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 Name Notes

1. mousedown

2. mousemove optional, multiple events, some limits

3. mouseup

4. click

5. mousemove optional, multiple events, some limits

6. mousedown

7. mousemove optional, 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 Name Notes

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 Name Notes

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)





DOM 事件顺序

标签:

原文地址:http://my.oschina.net/u/214483/blog/471350

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!