HTML焦点与键盘事件
本文转自http://blog.csdn.net/woxueliuyun/article/details/45152047
所谓焦点就是用户当前正在操作的对象，可以是某个元素，也可能是某个浏览器中的tab或window。比如用鼠标点击输入框，那么输入框就会成为焦点。使用键盘上的Tab键，又可以把焦点转移到另外一个元素或浏览器的其他区域。通过鼠标和键盘都可以转移焦点，甚至编辑焦点元素。
焦点元素
同一时间一个document只能有一个元素成为焦点，这个焦点元素可以使用JavaScript访问：
- document.activeElement;
如果没有元素成为焦点，默认是body元素作为activeElement。成为焦点的元素对应CSS的:focus伪类。
但不是所有元素都可以成为焦点，只有拥有可获焦区域的DOM锚才可以称为焦点：
可获焦区域
可获焦区域可能是元素，元素的部分或用户代理管理的其他部分，每一个可获焦区域有一个DOM锚，这个锚是一个Node对象，Node对象的位置就是可获焦区域在DOM中的位置。可获焦区域的API目前就通过这个锚来操作可获焦区域。
不是所有Node都能表示焦点区域，Node要变成焦点区域需要满足一些条件。下表只是列出了一些常见的可获焦区域和它的DOM锚：
| 可获焦区域 |
DOM锚 |
| 有tabindex焦点标志，并且没有disabled属性的元素 |
元素本身 |
| Image map中area的图形区域 |
img元素 |
| 用户代理提供的可获焦子控件，比如input[type=number]生成的上下两个按钮 |
生成子控件的元素 |
| 元素的滚动区域 |
产生滚动区域的元素 |
| 浏览上下文内document的viewport，比如iframe产生的视窗。 |
为之产生viewport的document |
tabindex焦点标记
使用键盘上的tab键，可以按顺序切换当前焦点元素，而影响这个切换顺序的属性就是元素的tabindex属性。这个属性的取值范围是0到32767，如果赋值为负数则表示没有焦点标记，不对它进行切换。
但并不是所有元素设置了tabindex就一定可以使用tab键切换成为焦点，首先tabindex的值不能为负数，而且不能有disabled属性。另外，这个元素必须有对应的可获焦区域，而且支持tabindex属性。HTML4规定FORM表单中只有以下元素支持tabindex属性：a、area、button、input、object、select、textarea。
没有显式设置tabindex属性的元素就不能通过Tab键切换成为焦点？也不是，只要元素拥有tabindex焦点标记就可以。W3C推荐用户代理自动为以下元素设置tabindex焦点标记：
- 有href属性的a元素；
- 有href属性的link元素；
- button元素；
- type不是hidden的input元素；
- select元素；
- textarea元素；
- iframe、frame元素；
- menuitem元素；
- 设置了draggable属性的元素；
- 设置了contenteditable属性的元素；
默认这些元素的tabindex为0。以上只是W3C推荐的元素，不同的浏览器实现可能不一样。比如在Chrome41中，如果不是上述元素，即使设置了合法的tabindex也不会被tab键切换到，而在IE和Firefox中，只要设置了合法的tabindex就可以被tab切换到。
切换顺序规则
由先到后的顺序是：
1. 元素的tabindex大于0的元素，按tabindex从小到大顺序切换；
2. 元素的tabindex相同的，按元素在document中的出现顺序切换；
3. 元素的tabindex为0，或没有设置tabindex，或tabindex不是有效整数（后两种等同于tabindex=0），按元素在document中的出现顺序切换；
HTMLElement.setActive()
setActive()方法是IE独有的方法，这个方法的作用是把另一个frame或window中的某个元素设置为activeElement，但这个方法不会使document滚动到焦点元素。也就是说UI上没有变化，但另一个frame或window中的那个元素已经成为了activeElement。
HTMLElement.focus() & HTMLElement.blur()
Focus()方法和blur()方法同样只适用于可获焦区域的DOM锚，不是所有元素调用focus()就能成为焦点的。而blur()要想触发blur事件，首先这个元素得先是焦点，否则是不会有blur事件的。
focus & focusin， blur & focusout等事件关系
一个元素成为active元素就等于获得了焦点，会触发这个元素的focus事件。有元素获得焦点，一般就有元素会失去焦点，失去焦点的元素触发blur事件。这两个事件几乎是同时发生的，但他们的执行顺序有区别，blur事件的监听方法先执行，然后才是focus事件的监听方法。
元素在document没有加载完之前是不能获得焦点的，获得焦点的元素通过documnt.activeElement可以访问。
Focusin也是元素在即将获取焦点的时候触发的事件，它和focus的主要区别是focus事件没有冒泡阶段。因为focusin事件有冒泡阶段，因此可以用来监听本元素及其子元素获取焦点的情况。同理，blur事件也没有冒泡阶段，而focusout有。
兼容性：
- Firefox不支持focusin和focusout事件；
- Chrome，获取焦点执行顺序：onfocus，onfocusin；失去焦点执行顺序：onblur， onfocusout。
- IE6，IE7，IE8，IE9，IE10，获取焦点执行顺序：onfocusin ，onfocus；失去焦点执行顺序：onfocusout ，onblur。
键盘事件
在DOM中，有几个键盘事件总是以获得焦点的元素作为目标的。
Keypress, keydown, keyup的区别
KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被KeyPress 识别的击键，诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。
三个事件的触发顺序按从早到晚：keydown、keypress、keyup。Keydown和keypress事件监听方法执行的时候，刚才敲入的字符还没有显示在输入框中，要等这些事件监听方法执行完后才插入。Keyup事件监听方法执行的时候，字符已经显示在输入框中。
如果摁住某个键不放，会间隔触发keypress和keydown事件，但只要你不放开，就不会触发keyup，keyup只有当你放开这个键才会触发。