当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。
聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。
失去焦点的时刻（“blur”）可能更为重要。它可能发生在用户点击页面的其它地方，或者按下 Tab 键跳转到下一个表单字段，亦或是其它途径的时候。
失去焦点通常意味着：“数据已经输入完成”，所以我们可以运行代码来检查它，甚至可以将其保存到服务器上，或进行其他操作。
当处理焦点事件时，有一些重要的特性。我们将尽力把这些内容介绍完整。
当元素聚焦时，会触发 focus 事件，当元素失去焦点时，会触发 blur 事件。
让我们使用它们来校验一个 input 字段。
在下面这个示例中：
- blur 事件处理程序检查这个字段是否输入了电子邮箱，如果没有输入，则显示一个 error。
- focus 事件处理程序隐藏 error 信息（在 blur 事件处理程序上会被再检查一遍）：
```javascript
Your email please:
```
现代 HTML 允许我们使用 input 特性（attribute）进行许多验证：required，pattern 等。有时它们正是我们所需要的。当我们需要更大的灵活性时，可以使用 JavaScript。如果数据是正确的，我们可以把它自动发送到服务器。
## [focus/blur 方法](https://zh.javascript.info/focus-blur#focusblur-fang-fa)
elem.focus() 和 elem.blur() 方法可以设置和移除元素上的焦点。
例如，如果输入值无效，我们可以让焦点无法离开这个 input 字段：
```javascript
Your email please:
```
这段代码在除了火狐（[bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)）之外的浏览器上都可以正常工作。
如果我们在 input 中输入一些内容，然后尝试使用 Tab 键或点击远离 的位置，那么 onblur 事件处理程序会把焦点重新设置到这个 input 字段上。
请注意，我们无法通过在 onblur 事件处理程序中调用 event.preventDefault() 来“阻止失去焦点”，因为 onblur 事件处理程序是在元素失去焦点 **之后** 运行的。
**JavaScript 导致的焦点丢失**
很多种原因可以导致焦点丢失。
其中之一就是用户点击了其它位置。当然 JavaScript 自身也可能导致焦点丢失，例如：
- 一个 alert 会将焦点移至自身，因此会导致元素失去焦点（触发 blur 事件），而当 alert 对话框被取消时，焦点又回重新回到原元素上（触发 focus 事件）。
- 如果一个元素被从 DOM 中移除，那么也会导致焦点丢失。如果稍后它被重新插入到 DOM，焦点也不会回到它身上。
这些特性有时候会导致 focus/blur 处理程序发生异常 —— 在不需要它们时触发。
最好的秘诀就是在使用这些事件时小心点。如果我们想要跟踪用户导致的焦点丢失，则应该避免自己造成的焦点丢失。
## [允许在任何元素上聚焦：tabindex](https://zh.javascript.info/focus-blur#yun-xu-zai-ren-he-yuan-su-shang-ju-jiao-tabindex)
默认情况下，很多元素不支持聚焦。
列表（list）在不同的浏览器表现不同，但有一件事总是正确的：focus/blur 保证支持那些用户可以交互的元素：
