焦点事件
焦点事件发生在元素节点和document
对象上面,与获得或失去焦点相关。它主要包括以下四个事件。
focus
:元素节点获得焦点后触发,该事件不会冒泡。blur
:元素节点失去焦点后触发,该事件不会冒泡。focusin
:元素节点将要获得焦点时触发,发生在focus
事件之前。该事件会冒泡。focusout
:元素节点将要失去焦点时触发,发生在blur
事件之前。该事件会冒泡。
这四个事件的事件对象都继承了FocusEvent
接口。FocusEvent
实例具有以下属性。
FocusEvent.target
:事件的目标节点。FocusEvent.relatedTarget
:对于focusin
事件,返回失去焦点的节点;对于focusout
事件,返回将要接受焦点的节点;对于focus
和blur
事件,返回null
。
由于focus
和blur
事件不会冒泡,只能在捕获阶段触发,所以addEventListener
方法的第三个参数需要设为true
。
form.addEventListener('focus', function (event) { event.target.style.background = 'pink'; }, true); form.addEventListener('blur', function (event) { event.target.style.background = ''; }, true);
上面代码针对表单的文本输入框,接受焦点时设置背景色,失去焦点时去除背景色。