웹 개발에서 블러 이벤트를 유발하는 요소를 식별하는 방법은 무엇입니까?

블러 이벤트와 관련된 요소 식별

웹 개발에서는 요소 간의 포커스 변경을 추적해야 하는 경우가 많습니다. HTML 입력 상자에 흐림 이벤트 리스너가 있는 시나리오를 생각해 보세요.

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

myInput 이외의 요소에 포커스가 생기면 흐림 이벤트가 발생하고 myBlurHandler() 함수가 실행됩니다. 그런데 이 함수 내에서 어떤 요소가 이벤트를 트리거했는지 어떻게 확인할 수 있나요?

UI 이벤트에 따르면 이벤트의 관련Target 속성을 이 목적으로 사용할 수 있습니다. 흐림 이벤트의 경우 관련 타겟은 포커스를 받는 이벤트 대상을 참조합니다.

<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>

이 예에서는 포커스를 잃으면 입력 요소가 주황색으로 바뀌고 포커스를 받는 요소가 라임색으로 바뀌므로 포커스 전환을 시각적으로 쉽게 추적할 수 있습니다.

위 내용은 웹 개발에서 블러 이벤트를 유발하는 요소를 식별하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!