Talk about the Focus/focusin/focusout/blur incident.

Event Trigger Time

focus: Bubbles are not supported when the focusable element receives focus;
focusin: And the focus same, just this event supports bubbling;
blur: Bubbles are not supported when the focusable element loses focus;
focusout: And the blur same, just this event supports bubbling;

Previously thought that all events are support bubbling, can cancel, consulted [MDN on the relevant information] (https://developer.mozilla.org/en-US/docs/Web/Events), only to find that some events support bubbling, Some events do not support bubbling; some events have default behavior (such events can be cancel), and some events have no default behavior at all (this type of event cannot be cancel). From the MDN can be clearly seen focus and blur these 2 kinds of events do not support bubbling, the events that support bubbling are focusin and focusout .

Event firing Sequence

For browsers that support these 4 events at the same time, the event execution sequence is Focusin > Focus > Focusout > Blur, and the code example is as follows:

<div class= "Parent" >    <input type= "text"/></div><div class= "Log" ></div>

JavaScript code

function log (str) {  $ ('. log '). Append ($ (' <div/> '). Text (str));} $ ('. Parent ')    . Focusin (function () {log (' div focusin ');})    . Focusout (function () {log (' div focusout ');})    . Focus (function () {log (' div focus ');})    . Blur (function () {log (' div blur ');}); $ (' input ')    . Focusin (function () {log (' input Focusin ');})    . Focusout (function () {log (' input focusout ');})    . Focus (function () {log (' input focus ');})    . Blur (function () {log (' input blur ');});

Execution results

The execution order of the 4 events can be seen from the execution result, as well as focus / blur not bubbling, so. The parent element is bound focus and the blur event callback is not triggered.

Browser support for Focusin and Focusout

Almost all browsers support focus and blur events, but for focusin and it is focusout not so ideal. Firefox does not support focusin and focusout events, Chrome and Safari only through the AddEventListener way to bind the event to normal use, other ways binding is not;

The face of such browser support seems to be a headache, thankfully the jquery pair focusin and focusout do the compatibility, use $.focusin and $.focusout implementation of event binding, in all browsers are supported;

focusAnd blurHow to implement an event proxy

The event proxy simply means that the child element event is bound to an ancestor element, and the ability to do so is facilitated by the capture and bubbling of the standard event model. We know that in the standard event model, the triggering of an event goes through three stages: the capture phase + the target phase + bubbling phase, with capture and bubbling to implement the event proxy. Known by the previous description, focus and blur does not support bubbling, but it supports capture, but the event model in IE does not capture only bubbling, so the event proxy can be implemented in non-ie browser by event binding in the capture phase . So how do you do it for IE browser? By supporting the bubbling is focusin and focusout realizing it can be done. The code examples are as follows:

HTML code

<form name= "Form" >  <input type= "text" name= "name" value= "Your name" >  <input type= "text" Name= " Surname "Value=" Your surname "></form>

JavaScript code

function Addcolor () {  this.style.background= "red";} var form = document.forms[' form '];if (form.addeventlistener) {//non IE browser  form.addeventlistener (' Focus ', Addcolor, t Rue);} else{  //IE  form.onfocusin = Addcolor}

Which elements are focusable

In the first section of this article, I mentioned the concept of a focusable element, and I think it is necessary to explain what the focusable element is here.
By default, only a subset of HTML elements can get the mouse focus input , as a large part of the HTML element is not able to get the mouse focus div , as these elements that get the mouse focus are the focusable elements. There are three ways to get the focus of an element:

• Mouse click

• Tab

• Call the focus () method

So by default, which elements are focusable elements

1. window: The focus event triggers when the page window changes from hidden to pre-visible

2. Form element (Form controllers): Input/option/textarea/button

3. Link element (links): a tag, area label (must be with href attribute, including null for HREF attribute)

4. Element with TabIndex property set (TabIndex value not-1)

5. An element with the contenteditable = "true" Property set

tabindexProperty

By default, too few elements can be focusable, what if you want an element to div be a focusable element? Very simple, set the TabIndex property!
TabIndex has 2 functions:

1. Make an element focusable as long as the TabIndex property is set on the element, this element becomes the focusable element regardless of the value of this property.

2. Defines the order of the elements that get focus when the TAB key is pressed multiple times the value of the TabIndex property can be positive, 0, negative, when the TAB key is pressed more than once, the first is the tabindex for positive elements, the order is: Tabindex=1, tabindex=2, tabindex=3 , tabindex= ..., and finally the tabindex=0 element gets the focus. Note: An element with a negative tabindex cannot be focused by the TAB key, only by clicking with the mouse or by calling the focus () method. The sample code is as follows:

<ul><LiTabIndex= "1"onfocus= "Showfocus (this)">One</Li><LiTabIndex= "0"onfocus= "Showfocus (this)">Zero</Li><LiTabIndex= "2"onfocus= "Showfocus (this)">Both</Li><LiTabIndex= "-1"onfocus= "Showfocus (this)">Minus One</Li><binTabIndex= "-2"onfocus= "Showfocus (this)">Minus</Li></ul>

Talk about the Focus/focusin/focusout/blur incident.