前面我们说了，页面中的元素，只有一部分可以获得焦点。表单中（用于输入）的元素，因为需要进行输入，所以基本都可以获得焦点。其他的还有比如链接，如果我们尝试用键盘在页面内进行导航的话，会发现链接也是可以获得焦点的。
在新版本的浏览器中，我们可以通过给元素添加 tabindex 属性，使原本不能被聚焦的元素可以聚焦。需要深入了解这个功能的小伙伴可以自己查阅文档，也是一个十分简单的操作，只是需要考虑浏览器的支持情况。
一个元素获得焦点，或者说被聚焦，一般在它外面会有一个高亮的边框，这是浏览器给予的样式，为了便于我们识别当前元素的聚焦状态。这个边框的样式也是可以进行一定自定义的。对于表单中的元素，它获得焦点之后，我们输入的内容就会出现在这个元素里面，或者我们所做的一些操作会对这个元素起作用（对于单选框或者复选框，一般的我们可以使用空格键进行选择和取消选择的切换）。如果这是一个链接元素，当它获得焦点的时候，我们点击回车，相当于对这个元素进行了点击。
元素获得焦点，是一个事件，标志着这个元素聚焦的状态发生了改变。这个事件是：focus。利用这个事件，我们可以做许多事情，比如在输入框内原本是有提示的文字，当它获得焦点之后，就把提示的文字清空。（不过现在有 placeholder 属性专门做这件事情了）。反过来我们也可以用 focus 来触发这个事件，结果就是让指定的元素获得焦点，方便用户进行操作。比如我写了一个搜索页面，那么，我可以认为在这个页面中的所有输入操作，默认都是希望写在输入框内的。所以一旦进入这个页面，就自动让输入框获得输入的焦点，这样用起来就很方便。
有获得就会有失去，blur 事件表示一个元素从拥有焦点的状态，到失去焦点的状态，这个改变的瞬间。于是参照上面的例子，在失去焦点的时候，我们判断一下输入框里面如果是空的，就是并没有被输入东西，那我们就再把提示文字显示出来。而那个搜索页面，当输入框失去焦点的时候，我们就让它重新获取焦点，这样就可以保证焦点一直在输入框内了（机智~）。我们也可以使用这个方法，让元素失去焦点。
这是关于元素获得和失去焦点的两个事件。结合我们前面所学的知识，已经可以做出很多有趣的东西来了。因为它们的使用也非常的简单，大家只要自己动手做几个基础的练习，就能够很好的理解，所以我就不在这里带着大家写代码了。
暂无评论内容