버블링 이벤트 지원 안 함: 제한 사항 및 범위

버블링 이벤트(Bubbling Event)는 DOM 트리에서 하위 요소부터 상위 요소까지 단계별로 발생하는 이벤트 전달 방식을 말합니다. 대부분의 경우 버블링 이벤트는 매우 유연하고 확장 가능하지만 이벤트가 버블링을 지원하지 않는 특별한 경우도 있습니다.

1. 버블링을 지원하지 않는 이벤트는 무엇인가요?
대부분의 이벤트는 버블링을 지원하지만 버블링을 지원하지 않는 이벤트도 있습니다. 다음은 버블링을 지원하지 않는 몇 가지 일반적인 이벤트입니다.

1. focus 및 흐림 이벤트
2. 이벤트 로드 및 언로드
3. 이벤트 입력, 선택 및 변경
4. 이벤트 제출 및 재설정
5. 스크롤 이벤트
6. mouseenter 및 mouseleave 이벤트
7. contextmenu event

2. 이벤트 예제
버블링 이벤트의 제한 사항을 더 잘 이해하기 위해 버블링을 지원하지 않는 각 이벤트에 대한 구체적인 코드 예제가 아래에 제공됩니다.

1. focus 및 Blur 이벤트
   focus 블러 이벤트는 포커스를 얻거나 잃는 요소를 처리하는 데 사용되는 이벤트입니다. 이러한 이벤트는 버블링을 지원하지 않습니다. 즉, 하위 요소에서 포커스 또는 흐림 이벤트를 트리거할 때 상위 요소의 해당 이벤트가 트리거되지 않습니다.

HTML 코드:

<div>
  <input type="text" id="myInput">
</div>

JavaScript 코드:

const myInput = document.getElementById('myInput');
myInput.addEventListener('focus', function() {
  console.log('Input获得焦点');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('focus', function() {
  console.log('Div获得焦点');
});

결과:
텍스트 상자에 포커스가 생기면 "Input gets focus"만 콘솔에 출력되고 "Div gets focus"는 출력되지 않습니다. 포커스 이벤트가 상위 요소 div까지 버블링되지 않기 때문입니다.

2. 로드 및 언로드 이벤트
   로드 및 언로드 이벤트는 페이지 또는 리소스가 로드된 후 트리거되는 이벤트입니다. 이러한 이벤트는 버블링을 지원하지 않습니다. 즉, 로드 또는 언로드 이벤트가 하위 요소에서 트리거될 때 상위 요소의 해당 이벤트가 트리거되지 않습니다.

HTML 코드:

<div>
  <img  src="image.png" id="myImage" alt="버블링 이벤트 지원 안 함: 제한 사항 및 범위" >
</div>

JavaScript 코드:

const myImage = document.getElementById('myImage');
myImage.addEventListener('load', function() {
  console.log('图片加载完成');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('load', function() {
  console.log('Div加载完成');
});

결과:
이미지 로딩이 완료되면 콘솔에는 "이미지 로딩 완료"만 출력되고, "Div 로딩 완료"는 출력되지 않습니다. 로드 이벤트가 상위 요소 div까지 버블링되지 않기 때문입니다.

3. 입력, 선택 및 변경 이벤트
   입력, 선택 및 변경 이벤트는 양식 요소 값의 변경을 처리하는 데 사용되는 이벤트입니다. 이러한 이벤트는 값이 실제로 변경된 요소에만 영향을 미치며 상위 요소에는 버블링되지 않습니다.

HTML 코드:

<input type="text" id="myInput">

JavaScript 코드:

const myInput = document.getElementById('myInput');
myInput.addEventListener('input', function() {
  console.log('输入框值改变');
});
const myForm = document.querySelector('form');
myForm.addEventListener('input', function() {
  console.log('表单值改变');
});

결과:
입력 상자의 값이 변경되면 "입력 상자 값 변경"만 콘솔에 출력되고 "양식 값 변경"은 출력되지 않습니다. 산출. 입력 이벤트가 상위 요소 양식까지 버블링되지 않기 때문입니다.

4. 제출 및 재설정 이벤트
   제출 및 재설정 이벤트는 양식이 제출되고 재설정될 때 트리거되는 이벤트입니다. 이러한 이벤트는 양식 요소 자체에만 적용될 수 있으며 상위 요소에는 버블링되지 않습니다.

HTML 코드:

<form id="myForm">
  <input type="submit" value="提交">
</form>

JavaScript 코드:

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('表单已提交');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('submit', function() {
  console.log('Div提交');
});

결과:
제출 버튼을 클릭하면 콘솔에 "Form Submitted"만 출력되고 "Div Submitted"는 출력되지 않습니다. 제출 이벤트가 상위 요소 div까지 버블링되지 않기 때문입니다. 예제에서는 event.preventDefault() 메서드를 통해 양식의 기본 제출 동작을 방지합니다.

5. 스크롤 이벤트
   스크롤 이벤트는 스크롤이 발생할 때 발생하는 이벤트입니다. 이 이벤트는 버블링을 지원하지 않습니다. 즉, 요소를 스크롤할 때 상위 요소의 스크롤 이벤트가 트리거되지 않습니다.

HTML 코드:

<div style="height: 100px; width: 100px; overflow: auto;">
  <p>这是一段很长的文本</p>
</div>

JavaScript 코드:

const myDiv = document.querySelector('div');
myDiv.addEventListener('scroll', function() {
  console.log('滚动');
});

결과:
div가 스크롤되면 "scroll"은 콘솔에만 출력되며 상위 요소에는 버블링되지 않습니다.

6. mouseenter 및 mouseleave 이벤트
   mouseenter 및 mouseleave 이벤트는 마우스가 요소에 들어오고 나갈 때 트리거되는 이벤트입니다. 이러한 이벤트는 버블링을 지원하지 않습니다. 즉, 마우스가 요소에 들어가거나 나갈 때 상위 요소의 해당 이벤트가 트리거되지 않습니다.

HTML 코드:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;">
  <p>鼠标进入这个div</p>
</div>

JavaScript 코드:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', function() {
  console.log('鼠标进入div');
});
const myBody = document.querySelector('body');
myBody.addEventListener('mouseenter', function() {
  console.log('鼠标进入body');
});

결과:
마우스가 div에 들어가면 "mouse enters div"만 콘솔에 출력되고 "mouse enters body"는 출력되지 않습니다.

7. contextmenu 이벤트
   contextmenu 이벤트는 마우스 오른쪽 버튼을 클릭했을 때 발생하는 이벤트입니다. 이 이벤트는 버블링을 지원하지 않습니다. 즉, 요소를 마우스 오른쪽 버튼으로 클릭하면 상위 요소의 컨텍스트 메뉴 이벤트가 트리거되지 않습니다.

HTML 코드:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>

JavaScript 코드:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击');
});
const myBody = document.querySelector('body');
myBody.addEventListener('contextmenu', function() {
  console.log('右键点击body');
});

결과:
div를 마우스 오른쪽 버튼으로 클릭하면 콘솔에는 "오른쪽 클릭"만 출력되지만 "본문을 마우스 오른쪽 버튼으로 클릭"하면 출력되지 않습니다. 예제에서는 event.preventDefault() 메서드를 통해 기본 컨텍스트 메뉴가 표시되는 것을 방지합니다.

3. 요약
버블 이벤트는 DOM 트리의 하위 요소에서 상위 요소까지 단계별 이벤트를 트리거하는 이벤트 전달 방법입니다. 대부분의 이벤트는 버블링을 지원하지만 버블링을 지원하지 않는 일부 특수 이벤트도 있습니다. 이 기사에서는 독자가 버블링 이벤트의 한계를 이해하는 데 도움이 되기를 바라며 특정 코드 예제를 통해 버블링을 지원하지 않는 이벤트를 분석합니다.

위 내용은 버블링 이벤트 지원 안 함: 제한 사항 및 범위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!