버블링 동작을 유발할 수 없는 이벤트에 대한 제한적 분석-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

버블링 동작을 유발할 수 없는 이벤트에 대한 제한적 분석

Jan 13, 2024 am 11:13 AM

버블링 이벤트 한정 트리거 동작. 버블링 이벤트: 이벤트

버블링 동작을 유발할 수 없는 이벤트에 대한 제한적 분석

버블링 이벤트의 한계 분석: 어떤 종류의 이벤트가 버블링 동작을 유발할 수 없나요?

소개:
DOM(Document Object Model)은 웹 페이지의 기본 구조입니다. DOM을 조작하여 웹 페이지의 동적 효과와 상호 작용을 얻을 수 있습니다. DOM 이벤트는 사용자 작업이나 브라우저에 의해 트리거되는 이벤트에 응답하는 데 사용되는 Javascript의 중요한 메커니즘입니다. 버블링 이벤트는 DOM 트리에서 버블링되는 이벤트의 동작을 나타내는 특별한 유형의 DOM 이벤트입니다. 그러나 버블링 이벤트에는 제한이 있으며 일부 이벤트는 버블링 동작을 트리거할 수 없습니다. 이 문서에서는 버블링 이벤트의 제한 사항을 자세히 분석하고 특정 코드 예제를 통해 이러한 시나리오를 보여줍니다.

1. 버블링 동작을 트리거하지 않는 이벤트 유형:

포커스 이벤트:
Focus 이벤트는 DOM 요소가 포커스를 받고 상위 요소에 버블링되지 않을 때 트리거됩니다. 예를 들어 다음 코드에서 입력 요소를 클릭하면 해당 요소의 포커스 이벤트만 트리거되고 상위 요소 div에는 버블링되지 않습니다.

<div onclick="console.log('div clicked')">
  <input type="text" onclick="console.log('input clicked')" />
</div>

로그인 후 복사

Blur 이벤트:
Blur 이벤트는 DOM 요소가 포커스를 잃고 상위 요소까지 버블링되지 않을 때 트리거됩니다. 다음은 샘플 코드입니다.

<div onclick="console.log('div clicked')">
  <input type="text" onblur="console.log('input blurred')" />
</div>

로그인 후 복사

Change 이벤트:
Change 이벤트는 입력 상자나 드롭다운 목록의 선택이 변경되는 경우와 같이 DOM 요소의 값이 변경될 때 트리거됩니다. 그러나 이벤트는 상위 요소까지 버블링되지 않습니다. 다음은 코드 예제입니다.

<div onclick="console.log('div clicked')">
  <input type="text" onchange="console.log('input changed')" />
</div>

로그인 후 복사

Load 이벤트:
Load 이벤트는 DOM 요소 또는 전체 문서가 로드될 때(예: 이미지가 로드되거나 페이지가 로드될 때) 트리거됩니다. 또한 이벤트는 상위 요소까지 버블링되지 않습니다. 다음은 샘플 코드입니다.

<div onclick="console.log('div clicked')">
  <img  src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" onload="console.log('image loaded')" / alt="버블링 동작을 유발할 수 없는 이벤트에 대한 제한적 분석" >
</div>

로그인 후 복사

Unload 이벤트:
Unload 이벤트는 전체 문서가 언로드되거나 닫힐 때 트리거되며 상위 요소까지 버블링되지 않습니다. 다음은 코드 예제입니다.

<div onclick="console.log('div clicked')">
  <body onunload="console.log('document unloaded')">
    ...
  </body>
</div>

로그인 후 복사

2. 버블링 이벤트의 적용 시나리오:
버블링 이벤트에는 제한이 있지만 여전히 많은 적용 시나리오가 있습니다. 예를 들어 이벤트를 트리거하기 위해 버튼을 클릭할 때 버튼의 상위 요소 또는 상위 요소의 일부 관련 로직을 처리해야 하는 경우가 많습니다. 다음은 코드 예입니다.

<div id="container" onclick="console.log('div clicked')">
  <button onclick="console.log('button clicked')">Click me</button>
</div>

로그인 후 복사

위 코드에서 버튼을 클릭하면 버튼의 클릭 이벤트가 트리거될 뿐만 아니라 상위 요소 div의 클릭 이벤트까지 버블링됩니다.

결론:
버블 이벤트는 DOM 이벤트의 중요한 메커니즘으로, 이벤트가 DOM 트리를 따라 버블링되어 보다 유연한 상호 작용 논리를 처리할 수 있습니다. 그러나 버블링 이벤트는 모든 이벤트 유형에서 지원되지 않습니다. 이 문서에서는 버블링 동작을 트리거하지 않는 일부 이벤트 유형을 자세히 설명하고 특정 코드 예제를 제공합니다. 이러한 제한 사항을 이해하면 버블링 이벤트를 더 잘 적용하고 개발 중에 불필요한 문제를 피할 수 있습니다.

위 내용은 버블링 동작을 유발할 수 없는 이벤트에 대한 제한적 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.