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

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

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

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

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

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

<form>
  <input id="text" type="text" placeholder="テキストを入力してください">
</form>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const text = document.getElementById('text'); // ①
  
  text.addEventListener('focus',function(e){ // ②
    e.target.style.background = "#9DCCE0"; // ③
  });
  text.addEventListener('blur',function(e){
    e.target.style.background = "";
  });
});
</script>