JS 버블링 이벤트 파싱 가이드: 초보자가 꼭 읽어야 할 자료-JS 튜토리얼-php.cn

JS 버블링 이벤트 파싱 가이드: 초보자가 꼭 읽어야 할 자료

王林

풀어 주다： 2024-01-13 10:21:06

원래의

1304명이 탐색했습니다.

JS 버블링 이벤트 파싱 가이드: 초보자가 꼭 읽어야 할 자료

초보자를 위한 필독서: JS 버블링 이벤트 소개 및 애플리케이션 시나리오 분석

소개:
웹 개발에서 JavaScript(JS)는 매우 중요한 프로그래밍 언어입니다. JS의 기본 구문과 작업을 마스터한 후에는 JS의 이벤트 메커니즘을 이해하는 것이 역량을 더욱 향상시키는 열쇠입니다. 그 중 버블링 이벤트는 JS 이벤트 메커니즘에서 중요한 개념입니다. 이 글에서는 JS 버블링 이벤트의 개념, 원리 및 실제 적용 시나리오를 자세히 소개하고, 초보자가 이를 더 잘 이해하고 익히는 데 도움이 되는 구체적인 코드 예제를 제공합니다.

1. 개념:
버블링 이벤트는 요소가 이벤트를 트리거할 때 가장 바깥쪽 조상 요소를 트리거할 때까지 상위 요소에서 이벤트가 순차적으로 트리거된다는 것을 의미합니다. 이 과정은 마치 바닥에서 거품이 올라오는 것과 같아서 버블링 현상이라고 합니다.

2. 원리:
버블링 이벤트의 원리는 DOM 트리 구조, 즉 문서 개체 모델을 기반으로 합니다. 웹 페이지에서 모든 요소(HTML 태그 및 JS에서 생성된 요소 포함)는 DOM 트리의 노드로 간주될 수 있습니다. 요소에서 이벤트가 발생하면 JS 엔진은 DOM 트리의 구조에 따라 동일한 유형의 이벤트를 순차적으로 트리거합니다. 즉, 가장 바깥쪽 조상 요소까지 상위 요소에서 동일한 이벤트를 트리거합니다.

3. 코드 예제 1: 버블링 이벤트의 기본 사용
다음은 버블링 이벤트의 기본 사용을 보여주는 간단한 HTML 코드 조각입니다.

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">点击触发冒泡事件</button>
    </div>
  </div>

  <script>
    // 选择DOM元素
    const outer = document.querySelector('#outer');
    const inner = document.querySelector('#inner');
    const btn = document.querySelector('#btn');

    // 添加冒泡事件监听
    outer.addEventListener('click', function() {
      console.log('父级元素outer被点击');
    });

    inner.addEventListener('click', function() {
      console.log('子级元素inner被点击');
    });

    btn.addEventListener('click', function() {
      console.log('按钮被点击');
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드에서는 상위 요소에 외부, 하위 요소에 내부 및 버튼 요소 btn은 클릭 이벤트 리스너를 추가합니다. 버튼을 클릭하면 다음 정보가 콘솔에 출력됩니다.

按钮被点击
子级元素inner被点击
父级元素outer被点击

로그인 후 복사

이는 버튼 요소의 클릭 이벤트가 내부 하위 요소와 외부 상위 요소에 버블링되고 해당 이벤트 콜백 함수를 트리거하기 때문입니다.

4. 코드 예제 2: 버블링 이벤트의 적용 시나리오
버블링 이벤트의 적용 시나리오는 매우 광범위합니다. 아래에서는 버블링 이벤트의 실제 적용을 보여주기 위해 장바구니 항목 삭제 기능을 예로 들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件应用场景示例</title>
  <style>
    .item {
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #ccc;
    }
    .delete-btn {
      float: right;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="cart">
    <div class="item">
      商品1
      <span class="delete-btn">删除</span>
    </div>
    <div class="item">
      商品2
      <span class="delete-btn">删除</span>
    </div>
    <div class="item">
      商品3
      <span class="delete-btn">删除</span>
    </div>
  </div>

  <script>
    // 选择DOM元素
    const cart = document.querySelector('#cart');

    // 添加冒泡事件监听
    cart.addEventListener('click', function(event) {
      const target = event.target;
      if (target.classList.contains('delete-btn')) {
        const item = target.parentNode;
        item.remove();
        console.log('删除成功');
      }
    });
  </script>
</body>
</html>

로그인 후 복사

위 코드에서는 각 제품 요소의 삭제 버튼에 대한 클릭 이벤트 리스너를 추가했습니다. 삭제 버튼을 클릭하면 콘솔에 "삭제 성공" 메시지가 출력되고 해당 제품 요소가 장바구니에서 제거됩니다. 이는 삭제 버튼을 클릭하면 버블링 이벤트가 상위 요소 카트에서 클릭 이벤트 수신 기능을 트리거하기 때문입니다. 클릭된 대상 요소가 삭제 버튼인지 여부를 확인하면 특정 삭제 기능을 구현할 수 있습니다.

요약:
버블 이벤트는 JS 이벤트 메커니즘에서 중요한 개념이자 웹 개발에서 무시할 수 없는 부분입니다. 버블링 이벤트의 개념, 원리 및 실제 적용 시나리오에 대한 이 기사의 자세한 소개를 통해 초보자는 이미 버블링 이벤트에 대한 사전 이해와 숙달을 이뤘다고 믿습니다. 이 기사가 초보자가 버블링 이벤트를 더 잘 이해하고 적용하며 JS 프로그래밍 기술을 향상하는 데 도움이 되기를 바랍니다.

위 내용은 JS 버블링 이벤트 파싱 가이드: 초보자가 꼭 읽어야 할 자료의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!