プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

要素にマウスカーソルが外れた時の操作を行う

対象のDOM操作の方法

DOM操作の基本として、

対象の要素の取得方法については、

3パターンあるので、以下を参考にしましょう。

対象のイベント操作の方法

DOM操作の基本として、

対象の要素の取得方法については、

3パターンあるので、以下を参考にしましょう。

サンプル

HTMLの

<p>確認用の要素</p>

という要素に対して、

DOM操作として要素を取得して、

その要素の「click」のイベントを操作するには、

// DOMを取得
let sample = document.querySelector('p');

// イベント操作
sample.addEventListener('mouseleave', event => {
  // フォーカスが外れた時の処理
  alert('フォーカスが外れました');
});

このように、

addEventListenerを使って、

イベント操作を行うことができます。

イベントの組み合わせ

この「mouseleave」と

  • CSSの「hover」

初心者向けピックアップ

初心者にオススメ