DOM

：

：

Element：focus イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

要素がフォーカスを受け取ったときに発生します。このイベントと focusin との違いは、focusin がバブリングするのに対し focus はしないことです。

focus の反対は blur です。

バブリング なし
キャンセル 不可
インターフェイス FocusEvent
イベント ハンドラー プロパティ onfocus
同期／非同期 同期
Composed はい
例
mdnより

HTML： 

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript： 

const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';
});
どのような要素でフォーカスが起こるのか

HTML： 

<SPAN id=IdTest>SPAN要素</SPAN><BR>
<SPAN id=IdTest2 contenteditable>SPAN要素：contenteditable</SPAN><BR>
<INPUT id=IdTest3 value="INPUT要素">

JavaScript： 

function Job(eve){ //focusイベント処理：
  D=eve; //＝[object]：[object FocusEvent]
	//isTrusted＝[boolean]：true
	//relatedTarget＝[object]：[object HTMLButtonElement]
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：focus
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…
  let E=eve.target;
  E.style.backgroundColor="#fee";
}
function Job2(eve){ //blurイベント処理：
  DA=eve; //＝[object]：[object FocusEvent]
	//isTrusted＝[boolean]：true
	//relatedTarget＝[object]：[object HTMLButtonElement]
	//view＝[object]：[object Window]
	//detail＝[number]：0
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：0
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：blur
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…
  let E=eve.target;
  E.style.backgroundColor="";
}
IdTest.onfocus=Job;
IdTest2.onfocus=Job;
IdTest3.onfocus=Job;
IdTest.onblur=Job2;
IdTest2.onblur=Job2;
IdTest3.onblur=Job2;
バブリングのテスト

HTML： 

<SPAN id=IdTest contenteditable>[SPAN要素：contenteditable<B>[B要素]</B>テキスト<B id=IdTest2>[B要素]</B>]</SPAN><BR>

JavaScript： 

function Job(eve){ //focusイベント処理：
  D=eve;
  let E=eve.target;
  E.style.backgroundColor="#fee";
}
function Job2(eve){ //blurイベント処理：
  DA=eve;
  let E=eve.target;
  E.style.backgroundColor="";
}
IdTest.onfocus=Job;
IdTest.onblur=Job2;
IdTest2.onfocus=Job;
IdTest2.onblur=Job2;

バブリングは確かにしないようだ。

HTML： バブリングしそうなHTMLで、 

<FORM id=IdTest style="border:1px solid red" contenteditable>[FORM要素<INPUT type=text>]</FORM><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //focusイベント処理：
  D=eve;
  let E=eve.target; //イベントが起きた要素を取得。
  E.style.backgroundColor="#fee"; //表現。
  IdLog.innerHTML=E.tagName;      //タグ名記録。
}
function Job2(eve){ //blurイベント処理：
  DA=eve;
  let E=eve.target; //イベントが起きた要素を取得。
  E.style.backgroundColor="";
  IdLog.innerHTML="";
}
IdTest.addEventListener('focus', Job);
IdTest.addEventListener('blur', Job2);

バブリングらしきことは起きていない？

テスト