The so-called focus is the object that the user is currently operating, which can be an element or a tab or window in a browser. For example, if you click the input box with the mouse, the input box will become the focus. Using the Tab key on the keyboard, you can move the focus to another element or other area of the browser. You can shift focus and even edit the focused element via both mouse and keyboard.
Focus elementOnly one element of a document can be focused at the same time . This focus element can be accessed using JavaScript:
document.activeElement;
If no element has focus, the default is the body element as activeElement. The element that becomes the focus corresponds to the CSS :focus pseudo-class.
But not all elements can be focused. Only DOM anchors with a focusable area can be called focus:
Focusable area It may be an element, part of an element or other part managed by the user agent. Each focusable area has a DOM anchor. This anchor is a Node object. The position of the Node object is the position of the focusable area in the DOM. The focusable area API currently uses this anchor to operate the focusable area.
Not all Nodes can represent the focus area. Some conditions need to be met for a Node to become the focus area. The following table just lists some common focusable areas and their DOM anchors:
| DOM anchor | ||||||||||||
| Elements with tabindex focus flag and no disabled attribute | The element itself | ||||||||||||
| The graphic area of the area in the Image map | img element | ||||||||||||
| The focus control provided by the user agent, such as the upper and lower buttons generated by input[type=number] | Generate the element of the child control | ||||||||||||
| The scrolling area of the element | Elements that generate scrolling areas | ||||||||||||
| The viewport of the document in the browsing context, such as the window generated by an iframe. | The document for which the viewport is generated |
Use the tab key on the keyboard to switch the currently focused element in order, and the attribute that affects this switching order is the tabindex attribute of the element. The value range of this attribute is 0 to 32767. If the value is negative, it means that there is no focus mark and it will not be switched.
But not all elements with tabindex set can be switched to focus using the tab key. First of all, the value of tabindex cannot be a negative number, and it cannot have the disabled attribute. In addition, this element must have a corresponding focusable area and support the tabindex attribute. HTML4 stipulates that only the following elements in the FORM form support the tabindex attribute: a, area, button, input, object, select, textarea.
Elements that do not have the tabindex attribute explicitly set cannot be switched to focus through the Tab key? No, as long as the element has the tabindex focus tag. W3C recommends that user agents automatically set tabindex focus tags for the following elements:
The default tabindex of these elements is 0. The above are only elements recommended by W3C, and different browser implementations may be different. For example, in Chrome 41, if it is not the above element, even if a legal tabindex is set, it will not be switched to by the tab key. In IE and Firefox, as long as a legal tabindex is set, it can be switched to by the tab key.
The order from first to last is:
1. For elements whose tabindex is greater than 0, switch according to the tabindex order from small to large;
2. If the tabindex of the elements is the same, switch according to the order in which the elements appear in the document;
3. The tabindex of the element is 0, or the tabindex is not set, or the tabindex is not a valid integer (the latter two are equivalent (at tabindex=0), switch according to the order in which the elements appear in the document;
focus & focusin, blur & focusoutWhen an element becomes an active element, it is equivalent to gaining focus, and the focus event of this element will be triggered. If an element gains focus, there will generally be an element that loses focus, and the element that loses focus triggers the blur event. These two events occur almost at the same time, but their execution order is different. The listening method of the blur event is executed first, and then the listening method of the focus event.
The element cannot get focus before the document is loaded . The focused element can be accessed through document.activeElement.
Focusin is also an event triggered when an element is about to gain focus. The main difference between it and focus is that the focus event does not have a bubbling stage. Because the focusin event has a bubbling stage, it can be used to monitor when this element and its sub-elements gain focus. In the same way, the blur event does not have a bubbling stage, but focusout does.
Compatibility:
In the DOM, there are several keyboard events that always target the focused element.
KeyPress is mainly used to receive ANSI characters such as letters and numbers, while the KeyDown and KeyUP event procedures can handle any keystrokes that are not recognized by KeyPress, such as: Function keys (F1-F12), editing keys, navigation keys, and any combination of these keys and keyboard shift keys, etc.
The three events are triggered in order from morning to night: keydown, keypress, keyup. When the Keydown and keypress event listening methods are executed, the characters just typed have not yet been displayed in the input box. They must be inserted after these event listening methods are executed. When the Keyup event listening method is executed, the characters are already displayed in the input box.
If you press and hold a key, keypress and keydown events will be triggered at intervals, but as long as you don't let go, keyup will not be triggered. Keyup will only occur when you let go of the key. will be triggered.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
