버블링으로 전달할 수 없는 이벤트는 무엇인가요?

어떤 이벤트에 버블링할 수 없나요?

이벤트 버블링은 요소가 웹 페이지에서 이벤트를 트리거할 때 상위 요소에도 이벤트에 대한 리스너가 있는 경우 해당 이벤트가 상위 요소에서도 트리거된다는 의미입니다. 이벤트 버블링은 웹 개발에서 매우 일반적이며 페이지에 있는 여러 요소의 이벤트 응답을 쉽게 관리할 수 있습니다. 그러나 모든 이벤트가 버블링 전달에 적합한 것은 아니며 일부 이벤트는 불필요한 문제를 피하기 위해 버블링을 방지해야 합니다. 이 문서에서는 버블링할 수 없는 몇 가지 일반적인 이벤트를 소개하고 구체적인 코드 예제를 제공합니다.

1. 포커스 및 블러 이벤트

웹 페이지에서 요소가 포커스를 얻거나(포커스) 포커스를 잃으면(블러) 해당 이벤트가 트리거됩니다. 포커스 이벤트는 페이지에서의 사용자 상호 작용과 관련되어 있으므로 이 두 이벤트는 버블링되어 전달될 수 없습니다. 포커스 이벤트가 버블링되어 전달될 수 있으면 예상치 못한 결과가 발생할 수 있습니다. 다음은 샘플 코드입니다.

<div id="outer">
  <input id="inner" type="text">
</div>

<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("focus", function() {
  console.log("outer focus");
});

inner.addEventListener("focus", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner focus");
});

inner.addEventListener("blur", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner blur");
});

outer.addEventListener("blur", function() {
  console.log("outer blur");
});
</script>

위 코드에서 내부 텍스트 입력 상자가 포커스를 받으면 내부 포커스 이벤트가 발생하며, stopPropagation() 메서드를 통해 해당 이벤트가 외부 div 요소로 버블링되는 것을 방지합니다. 외부 포커스 이벤트는 트리거되지 않습니다.

2. 스크롤 이벤트

스크롤 이벤트는 페이지가 스크롤될 때 발생하는 이벤트이며 버블링으로는 전달할 수 없습니다. 스크롤 이벤트는 웹페이지의 스크롤과 관련이 있기 때문에 스크롤 이벤트를 버블링하여 전달할 수 있다면 페이지 스크롤에 혼란을 줄 수 있습니다. 샘플 코드는 다음과 같습니다.

<div id="container" style="height: 200px; overflow: auto;">
  <div id="content" style="height: 1000px;"></div>
</div>

<script>
var container = document.getElementById("container");
var content = document.getElementById("content");

container.addEventListener("scroll", function() {
  console.log("container scroll");
});

content.addEventListener("scroll", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("content scroll");
});
</script>

위 코드에서는 콘텐츠 영역이 스크롤되면 해당 콘텐츠 영역의 스크롤 이벤트가 발생하고, stopPropagation() 메서드를 통해 이벤트 버블링이 컨테이너 요소로 전달되는 것을 방지하고, 따라서 컨테이너의 스크롤 이벤트가 트리거되지 않습니다.

3. 로드 및 언로드 이벤트

로드 이벤트는 페이지 또는 이미지가 로드된 후에 트리거되고, 언로드 이벤트는 페이지가 언로드되려고 할 때 트리거됩니다. 이 두 이벤트는 전체 페이지의 로딩 및 언로드와 관련되어 있기 때문에 버블링 및 전달이 불가능합니다. 버블링 및 전달이 가능한 경우 페이지 로딩 및 언로드 순서에 혼란이 발생할 수 있습니다. 다음은 샘플 코드입니다.

window.addEventListener("load", function() {
  console.log("page loaded");
});

window.addEventListener("unload", function() {
  console.log("page unloaded");
});

위 코드에서는 페이지가 로드될 때 로드 이벤트가 트리거되고, 페이지가 언로드되려고 할 때 언로드 이벤트가 트리거됩니다. 이 두 이벤트는 버블링되지 않으며, 다른 요소로 전달됩니다.

요약

위에서 언급한 이벤트 외에도 입력, 변경, 재설정, 제출, 마우스엔터, 마우스리브 등 버블링할 수 없는 다른 이벤트도 있습니다. 이러한 이벤트를 사용할 때는 불필요한 문제를 피하기 위해 이벤트 전달 메커니즘에 주의를 기울여야 합니다. 이벤트 전달의 원칙을 이해하면 웹 페이지의 이벤트 응답을 더 잘 제어 및 관리하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 버블링으로 전달할 수 없는 이벤트는 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!