DOM event - focus (onfocus)

Devtool Chrome Event Listener

About

This page is about the focus event. ie how to register a callback function to handle this event

focus means that a HTML element becomes active.

The opposite of the focus event is called the blur event.

1)

Properties

Inheritance

Focus Event Type Inheritance (bubble) Description
focus false the child elements do not inherit the listener
blur false the child elements do not inherit the listener
focusin true the child elements inherit the listener
focusout true Doc

For instance, the focus event listener does not propagate to its children. (ie If you create a focus listener on a window, all elements of the window will not inherit the listener.

Registration

Listener

As an listener

function changeFocus(){
  document.getElementById("radio-2").focus();
}

onFocus = (event) => {
  console.log(event.target.id+" is on focus");
  event.target.style.background = 'pink';    
};

radio1 = document.getElementById("radio-1");
radio1.addEventListener('focus', onFocus);

radio2 = document.getElementById("radio-2");
radio2.addEventListener('focus', onFocus);
<p>Click on Radio1, then Radio2, then the Button
<p><label><input id="radio-1" type="radio" name="radio" value="radio-1"  autofocus />Radio 1</label></p>
<p><label><input id="radio-2" type="radio" name="radio" value="radio-2"  />Radio 2<label></p>
<button onClick="changeFocus()">Focus Dynamically on Radio2</button>

handler

As an handler - The onfocus attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.





Discover More
Devtool Chrome Event Listener
Change event (DOM, Javascript)

A page and example about the change event
Devtool Chrome Event Listener
DOM - Blur Event

blur is an event that occurs when an element lost focus (blur) (ie is not the active element anymore) focus event Close an overlay (such as a dropdown menu) Reset a state
Devtool Chrome Event Listener
DOM Event - focusin

focusin is a focus event where you can register a listener that is enable for all children elements. Ref If a focus event occurs in...
Devtool Chrome Event Listener
Event - Category

event type are categorized further in category. Form Event Focus Event Input Devices Event View Events Example non-normative. Category Event Type Form Event submit Focus Event focus,...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
Color Autocompletion List
How to create an Autocompletion functionality with CSS , Javascript and HTML ?

This article shows you how to create a search box with an autocompletion feature
Chrome Devtool Selector
Selector is pseudo-class

:is() is a matches-any logical pseudo-class that takes a selector list as its argument. matches any element that is being hovered or focused, regardless of its namespace. represents only...
Web UI - Popper library (tooltip and popover positioning)

popper is a positional library that position tooltips and popovers popper is now floating-ui It also makes sure that the positioned element never end up off screen or cropped by an overflow. (Resizing...
What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

A modal is a overlay window behavior: where its contents are the only elements that can receive focus. When open, the user cannot interact with the rest of the page (nor can screen readers) until...



Share this page:
Follow us:
Task Runner