导语：JS中的focus、blur与click事件解析

前言

在Javascript中存在一系列的原生DOM事件，事件触发的先后也是有顺序的，今天我们从具体场景出发，看看在Javascript中focus、blur与click事件的触发机制。

Javascript

场景

我们需要实现这样一个场景：有一个input输入框和一个button，当input获取焦点时显示button，在input失去焦点时隐藏button，而且在input失去焦点的时候触发button的click事件。效果图如下所示。

效果图

页面代码

首先我们看看页面的html部分代码，如下图所示，在页面我们引入了boostrap。

页面html代码

针对上面的html代码，很多人会直接给出下面的Javascript代码来绑定事件。

Javascript代码

问题

如果我们采用上述Javascript部分代码会发现，我们想要的效果是行不通的。我们会发现在点击button的时候，并不会触发click事件。这是什么原因呢？

这是因为在Javascript中，blur事件先于click事件执行，在blur事件执行时已经隐藏掉button元素，所以button元素的click事件无法触发。

解决方法1

既然遇到问题，就会有对应的解决办法。

首先我们看看第一种解决办法：使用mousedown事件。因为mousedown事件会在blur事件触发之前执行，可以达到上述的目的。

mousedown事件

解决方法2

在使用方法1解决问题时会发现，虽然事件会触发，但是button看起来并没有点击的效果，因为mousedown事件是鼠标按下的事件，不会触发到click事件，所以没有click的效果。

我们可以同时绑定mousedown和click事件来达到这种效果，然后阻止mousedown事件的默认操作，等待click事件触发。

mousedown与click事件

通过方法2，可以很好的解决方法1中存在的问题。

总结

在Javascript中，某些事件的处理顺序为mousedown > blur > mouseup > click，大家只要记住这个顺序，就可以针对不同的场景应用不同的事件。

本文内容由小媛整理编辑！