DOM

：

：

Element：focusin イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

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

focusin の反対は focusout です。

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

HTML： 

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

JavaScript： 

const form = document.getElementById('form');

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

form.addEventListener('focusout', (event) => {
  event.target.style.background = '';
});

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.onfocusin=Job;
IdTest.onfocusout=Job2;
IdTest2.onfocusin=Job;
IdTest2.onfocusout=Job2;

イベントが起きない。

onfocusin部、onfocusout部の代わりに、 

IdTest.addEventListener('focusin', Job);
IdTest.addEventListener('focusout', Job2);
IdTest2.addEventListener('focusin', Job);
IdTest2.addEventListener('focusout', Job2);

イベントは起きるが、バブリングしないような？。

HTML： 

<FORM id=IdTest style="border:1px solid red" contenteditable>[FORM要素<INPUT type=text>]</FORM><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.addEventListener('focusin', Job);
IdTest.addEventListener('focusout', Job2);

バブリングを確認。

テスト