【JavaScript】blurイベントとは？フォーカスが外れた時に処理を行う

▼トリガーになる要素を取得(addEventListenerとonblurプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得

▼addEventListenerメソッド
elem.addEventListener('blur',function(){　// 第一引数にblurを指定
  // 処理を記述
});

▼onblurプロパティ
elem.onblur = function(){
  // 処理を記述
};

▼onblur属性
<form>
  <input type="text" placeholder="テキストを入力してください" onblur="blurEvent();">
</form>

<script>
function blurEvent(){
  // 処理を記述
}
</script>

<form>
  <input id="input-text" type="text" placeholder="テキストを入力してください">
  <p>入力されたテキスト：<span id="output-text"></span></p>
</form>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputText = document.getElementById('input-text');   // ①
  const outputText = document.getElementById('output-text'); // ①
  
  inputText.addEventListener('blur',function(e){ // ②
    outputText.textContent = e.target.value; // ③
  });
});
</script>