Web 開発でブラー イベントを引き起こす要素を特定するには?

ブラー イベントに関係する要素の特定

Web 開発では、多くの場合、要素間のフォーカスの変更を追跡する必要があります。 HTML 入力ボックスにブラー イベント リスナーがあるシナリオを考えてみましょう。

<code class="html"><input id="myInput" onblur="myBlurHandler()" /></code>

myInput 以外の要素がフォーカスを取得すると、ブラー イベントが発生し、myBlurHandler() 関数が実行されます。ただし、この関数内で、どの要素がイベントをトリガーしたかをどのように判断できますか?

UI イベントによると、イベントの関連ターゲット プロパティをこの目的に使用できます。ブラー イベントの場合、relativeTarget はフォーカスを受け取るイベント ターゲットを参照します。

<code class="js">function myBlurHandler(event) {
  let focusedElement = event.relatedTarget;
  // Your custom logic here
}</code>

これにより、以下の例に示すように、ブラー イベントを発生させた要素にアクセスできるようになります。

<code class="js">function blurListener(event) {
  event.target.classList.add('blurred');
  if (event.relatedTarget) event.relatedTarget.classList.add('focused');
}
document.querySelectorAll('input').forEach(el => el.addEventListener('blur', blurListener, false));</code>

この例では、入力要素がフォーカスを失うとオレンジ色に変わり、フォーカスを受け取る要素がライム色に変わり、フォーカスの遷移を視覚的に追跡しやすくなります。

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