HTML でブラー イベントを引き起こす要素を特定する方法

Blur イベントをトリガーするターゲット要素の決定

HTML 入力要素で Blur イベントを処理する場合、その要素をどのように識別するか疑問に思うかもしれません。フォーカスシフトを引き起こした要素。この記事では、トリガー要素の ID を取得する方法について説明します。

提供されたコード スニペットでは、blur イベントが入力フィールドにアタッチされています。ただし、課題は、クリック可能なスパン要素など、ブラー イベントを開始した要素を特定することにあります。

relationTarget プロパティを使用した解決策

イベント ターゲット仕様による、イベント オブジェクトの AssociatedTarget プロパティは、blur イベントの発生後にフォーカスを取得した要素に関する情報を提供します。ブラー イベントの場合:

relatedTarget: event target receiving focus

例:

function blurListener(event) {
  event.target.className = 'blurred';
  if (event.relatedTarget)
    event.relatedTarget.className = 'focused';
}

// Add blur listeners to all input elements
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

このブラー リスナーを入力要素にアタッチすると、フォーカスを取得したときにトリガー要素を識別できます ( className = 'focused') に変更し、ぼやけた入力要素の className を 'blurred' に変更します。

以上がHTML でブラー イベントを引き起こす要素を特定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。