버블링 이벤트와 비버블 이벤트 간의 반응 메커니즘의 차이점은 무엇입니까?

버블링 이벤트와 비버블링 이벤트의 차이점은 무엇인가요? 구체적인 코드 예제가 필요합니까?

이벤트는 프로그래밍에서 중요한 역할을 합니다(예: 클릭, 드래그 등). 이는 브라우저나 웹페이지의 내부 동작(예: 로딩 완료, 창 크기 변경 등)일 수 있습니다. 다양한 이벤트 전파 방법에 따라 이벤트는 버블링 이벤트와 버블이 아닌 이벤트로 나눌 수 있습니다.

버블링 이벤트
버블링 이벤트는 이벤트 대상에서 시작하여 문서 루트 노드에 도달할 때까지 상위 요소로 단계적으로 전파되는 이벤트를 말합니다. 전파 프로세스 중에 상위 요소의 이벤트 핸들러가 먼저 트리거된 다음 상위 요소의 이벤트 핸들러 등이 루트 노드의 이벤트 핸들러까지 트리거됩니다.

다음은 버블링 이벤트에 대한 샘플 코드입니다.

HTML 코드:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript 코드:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
});

버튼을 클릭하면 콘솔에 다음이 출력됩니다.

按钮被点击
内部div被点击
外部div被点击

출력에서 볼 수 있듯이 , 버블링 이벤트는 먼저 버튼의 클릭 이벤트 핸들러를 실행한 다음 내부 div의 클릭 이벤트 핸들러, 마지막으로 외부 div의 클릭 이벤트 핸들러를 실행합니다.

비버블링 이벤트
비버블링 이벤트는 이벤트가 이벤트 대상에서만 트리거되고 위쪽으로 전파되지 않음을 의미합니다. 즉, 클릭한 요소의 이벤트 핸들러만 실행됩니다.

다음은 버블링되지 않는 이벤트에 대한 샘플 코드입니다.

HTML 코드:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript 코드:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
}, true);

버튼을 클릭하면 콘솔에 다음 내용만 출력됩니다.

按钮被点击

보시다시피 출력에서 버블링되지 않는 이벤트는 버튼의 클릭 이벤트 핸들러만 트리거합니다.

결론적으로 버블링 이벤트와 비버블 이벤트의 주요 차이점은 이벤트가 전파되는 방식입니다. 버블링 이벤트는 이벤트 대상에서 상위 요소로 전파되는 반면, 버블링되지 않는 이벤트는 이벤트 대상에서만 트리거됩니다. 이벤트 전파를 처리하고 페이지의 대화형 효과를 최적화하려면 이 두 이벤트의 차이점을 이해하는 것이 매우 중요합니다.

위 내용은 버블링 이벤트와 비버블 이벤트 간의 반응 메커니즘의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!