Element: blur イベント

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

blur の反対は focus です。

例

簡単な例

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 = '';    
});

結果

イベント委譲

このイベントのイベント委譲を実装する方法は二つあります。 focusout イベントを使用するか、 addEventListener() の useCapture 引数に true を設定するかです。

HTML

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

JavaScript

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

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

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

結果

仕様書

ブラウザーの対応

このイベントが処理されている間、 Document.activeElement の値はブラウザーによって異なります (バグ 452307)。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の body を設定します。

関連情報

• 関連イベント: focus, focusin, focusout
• Window を対象としたこのイベント: blur イベント