Get the App
SLTechnology News&Howtos  ›  Development  › 

What are the common focus events in javascript

Shulou Source: shulou.com Published: 2022-06-01 03:45:11 10月01日 Update

This article mainly introduces the relevant knowledge of "what are the common focus events in javascript". Xiaobian shows you the operation process through actual cases. The operation method is simple and fast and practical. I hope this article "what are the common focus events in javascript" can help you solve the problem.

Focus events are triggered when a page gains or loses focus. Using these events, in conjunction with the document.hasFocus() method and document.activeElement property, you can know where the user is on the page. There are six focal events.

blur: Triggers when an element loses focus. This event does not bubble; all browsers support it.

DOMFocusIn: Triggers when an element gains focus. This event is equivalent to HTML event focus, but it bubbles. Only Opera supports this event. DOM level 3 event deprecates DOMFfocusIn and selects focusin.

DOMFocusOut: Triggers when an element loses focus. This event is a generic version of HTML event blur. Only Opera supports this event. DOM level 3 events deprecate DOMFocusOut and select focusout.

focus: Triggers when an element gains focus. This event does not bubble; all browsers support it.

focusin: Triggers when an element gains focus. This event is equivalent to HTML event focus, but it bubbles. Browsers that support this event are IE 5.5 +, Safari 5.1+, Opera 11.5+ and Chrome.

focusout: Triggers when an element loses focus. This event is a generic version of HTML event blur. Browsers that support this event are IE 5.5 +, Safari 5.1+, Opera 11.5+ and Chrome.

The two most prominent events in this category are focus and blur, both of which are events supported by all browsers since the early days of JavaScript. The biggest problem with these events is that they don't bubble. So IE's focusin and focusout vs. Opera's DOM focusIn

and DOMFocusOut overlap. IE's approach was eventually adopted as standard for DOM level 3 events.

When the focus moves from one element to another on the page, the following events are triggered:

(1)focusout triggers on elements that lose focus;

(2)focusin triggers on the element that gets focus;

(3)blur Triggers on an element that loses focus;

(4)DOMFocusOut triggers on elements that lose focus;

(5)focus Triggers on the element that gets focus;

(6)DOMFocusIn triggers on the element that gets focus.

The event targets for blur, DOMFfocusOut, and focusout are elements that lose focus, while the event targets for focus, DOMFfocusIn, and focusin are elements that gain focus.

To determine if your browser supports these events, use the following code:

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

About "javascript common focus events what" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Tags: Events focus elements support browsing common knowledge page only support it way method version goal equivalence industry problem choice difference Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS Xiaomi Shulou Information Redmi Shulou Tech Info