Panduan penghuraian acara menggelegak JS: bahan mesti dibaca untuk pemula-tutorial js-php.cn

Panduan penghuraian acara menggelegak JS: bahan mesti dibaca untuk pemula

王林

Lepaskan： 2024-01-13 10:21:06

asal

1303 orang telah melayarinya

Panduan penghuraian acara menggelegak JS: bahan mesti dibaca untuk pemula

Mesti dibaca untuk pemula: Pengenalan kepada peristiwa menggelegak JS dan analisis senario aplikasi

Pengenalan:
Dalam pembangunan web, JavaScript (JS) ialah bahasa pengaturcaraan yang sangat penting. Selepas menguasai sintaks asas dan operasi JS, memahami mekanisme acara JS adalah kunci untuk meningkatkan lagi keupayaan anda. Antaranya, peristiwa menggelegak merupakan konsep penting dalam mekanisme acara JS. Artikel ini akan memperkenalkan konsep, prinsip dan senario aplikasi praktikal acara menggelegak JS secara terperinci dan menyediakan contoh kod khusus untuk membantu pemula memahami dan menguasainya dengan lebih baik.

1. Konsep:
Peristiwa menggelegak bermaksud apabila elemen mencetuskan peristiwa, peristiwa itu akan dicetuskan dalam elemen induk mengikut urutan sehingga ia mencetuskan unsur moyang paling luar. Proses ini seperti gelembung yang timbul dari bawah, jadi ia dipanggil peristiwa menggelegak.

2. Prinsip:
Prinsip peristiwa menggelegak adalah berdasarkan struktur pokok DOM, iaitu model objek dokumen. Dalam halaman web, semua elemen (termasuk teg HTML dan elemen yang dicipta oleh JS) boleh dianggap sebagai nod pokok DOM. Apabila peristiwa berlaku pada elemen, enjin JS akan mencetuskan jenis peristiwa yang sama mengikut urutan mengikut struktur pepohon DOM, iaitu, mencetuskan peristiwa yang sama pada elemen induk sehingga unsur moyang paling luar.

3. Contoh Kod 1: Penggunaan asas peristiwa menggelegak
Berikut ialah coretan kod HTML ringkas yang menunjukkan penggunaan asas peristiwa menggelegak:

<!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>

Salin selepas log masuk

Dalam kod di atas, kami memberikan elemen induk luar, elemen anak dalam dan Elemen butang btn menambah pendengar acara klik. Apabila kita mengklik butang, maklumat berikut akan dikeluarkan pada konsol:

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

Salin selepas log masuk

Ini kerana peristiwa klik elemen butang berbuih ke elemen anak dalam dan elemen induk di luar, dan mencetuskan fungsi panggil balik acara yang sepadan.

4. Contoh kod 2: Senario aplikasi acara menggelegak
Senario aplikasi acara menggelegak sangat luas. Di bawah ini kami mengambil fungsi pemadaman item troli beli-belah sebagai contoh untuk menunjukkan aplikasi praktikal acara menggelegak.

<!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>

Salin selepas log masuk

Dalam kod di atas, kami menambah pendengar acara klik untuk butang padam setiap elemen produk. Apabila butang padam diklik, mesej "Padam Berjaya" dikeluarkan dalam konsol dan elemen produk yang sepadan dialih keluar daripada troli beli-belah. Ini kerana apabila butang padam diklik, acara menggelegak akan mencetuskan fungsi mendengar acara klik pada troli elemen induk Dengan menentukan sama ada elemen sasaran yang diklik ialah butang padam, fungsi padam tertentu boleh dilaksanakan.

Ringkasan:
Acara buih ialah konsep penting dalam mekanisme acara JS dan bahagian yang tidak boleh diabaikan dalam pembangunan web. Melalui pengenalan terperinci artikel ini kepada konsep, prinsip dan senario aplikasi praktikal acara menggelegak, saya percaya bahawa pemula telah pun mempunyai pemahaman awal dan penguasaan acara menggelegak. Saya harap artikel ini dapat membantu pemula memahami dengan lebih baik dan menggunakan acara menggelegak serta meningkatkan kemahiran pengaturcaraan JS mereka.

Atas ialah kandungan terperinci Panduan penghuraian acara menggelegak JS: bahan mesti dibaca untuk pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!