javascript 中的onblur 事件

一、javascript 中的onblur 事件

1、你说的没错，blur本来的意思就是模糊。

2、最开始的情况是这样的，在我们看一个电视镜头时，画面上有两个人，一远一近，如果远处的人在说话，我们将镜头位伸，焦点在远处的人身人，而近处的人就模糊了，而拉近时，近处的人会清晰，远处的人处于失焦的情况下就会模糊。

3、这个与网页中的情况很象的，一个网页中只有一个焦点，这个焦点到一个对象上去，那么其余的对象都是在失焦的状况下的。所以人家使用了onblur作为事件从焦点转移的事件是没有错的。

4、我想这个对象学习js是没有任何帮助的，所以没有必要再进行深入。两种语言对译时显然是不能完美对译的，鲁迅先生曾说过，翻译讲究的是信（对原译语种语义的保证），达（被译语种的清晰表达），雅（翻译上不能做结巴，被译语种的流利表达）三字。而按单词查汉语意思来就是一个索引而已，有时翻译时不可能做到完美对接，而这个就是这种情况，我们兼顾了达字，就翻译成了失去焦点的事件，如果不考虑达的情况，你爱怎么翻译都行的！

5、这种情况尤其多见于俚语，谵语的翻译。

6、难道说也是英语不过关，反pains翻译错了？pain并没有任何劳动的意思的！

二、div添加blur事件

遇到一个需求，要给一个 div添加 blur事件，具体情况是： el-seclect不满足项目下拉列表的需求，找了一些插件，也没发现比较好用的，所以就决定自己用 div实现效果，也就遇到了当鼠标点击其他空白处时， div要隐藏起来的问题

刚开始毫无思路，查了查资料，发现还真的可以

不生效，然后发现是 div不能直接加 blur事件

差不多就是这种： ，效果很奇怪，不符合需求

最后想到了，用 vue去监听所有的点击事件，从里面筛选出来这个 div，除了点击这个 div，其他地方全部隐藏

这个想法没问题，但是运行之后，控制台报错

Uncaught TypeError: this.$refs.boxRef.contains is not a function at HTMLDocument.eval，就很烦，然后查了好久，终于找到一篇相关博客，原因就是用js原生获取dom的方法代替ref方式

到这里就成功的实现了 div的 blur效果，学废了学废了！

贴上大佬博客：

三、js 函数里面的focus()是干嘛的

1、在JavaScript中，focus()虽然比较罕见，但还是比较有用的，

2、主要是用于获取焦点，说白了，就是自动把光标放到此组件上面，无须用户再次操作。

3、上述代码，设置在打开网页5秒之后，无须用户操作，focus()方法会自动将光标放到id为text_2这个文本框。

4、在IE中，window.self.focus();还会起作用。5秒后，窗口还会自动获得焦点，切换到其他窗口，或者其他程序，等5秒，IE浏览器还会自动返回到前台，成为活动窗口，而在野狐禅等其他浏览器中不适用。火狐、谷歌等为了安全性，设置浏览器无法实现控制用户行为。在其他程序应用时，让浏览器获取窗口焦点这个是无法做到的。最少在浏览器内部js无法做到。

5、不过对于chrome或者firefox，safari之类的浏览器可以用过Notification这个类来做一个弹出通知。然而notification必须要支持html5，太麻烦。目前要求窗口获取焦点，基本上用alert去实现。

6、由于IE的window.self.focus();是其作用的，不被禁止的，配合onblur()获取焦点事件，还能构造一个死循环，让IE崩溃，如下的代码：