Bagaimana untuk mendapatkan elemen menggelegak dalam acara js menggelegak-tutorial js-php.cn

Bagaimana untuk mendapatkan elemen menggelegak dalam acara js menggelegak

WBOY

Lepaskan： 2024-02-20 09:13:36

asal

436 orang telah melayarinya

Bagaimana untuk mendapatkan elemen menggelegak dalam acara js menggelegak

Bagaimana untuk mendapatkan elemen menggelegak dalam acara js menggelegak, anda memerlukan contoh kod khusus

Peristiwa menggelegak bermakna apabila acara pada elemen dicetuskan, elemen induk atasnya juga akan menerima acara tersebut. Dalam JavaScript, elemen menggelegak boleh diperolehi melalui objek acara. Di bawah, saya akan memberikan anda contoh kod konkrit untuk menerangkan cara mendapatkan elemen menggelegak.

Pertama, kami memerlukan halaman HTML dengan elemen bersarang seperti yang ditunjukkan di bawah:

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

<script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam halaman ini, kami mempunyai elemen div luar (id ialah "luar"), elemen div dalam (id ialah "dalam"), dan elemen butang (id ialah "butang").

Seterusnya, kami memerlukan fail JavaScript untuk mengendalikan acara menggelegak dan mendapatkan elemen menggelegak. Dalam fail script.js, kami akan mengendalikan acara klik dan mendapatkan id elemen menggelegak. Kodnya adalah seperti berikut:

// 获取外层div元素
var outer = document.getElementById('outer');

// 绑定点击事件处理函数
outer.addEventListener('click', function(event) {
  // 获取冒泡元素的id
  var bubbleElementId = event.target.id;
  
  // 打印冒泡元素的id
  console.log('冒泡元素的id：', bubbleElementId);
});

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mendapatkan elemen div luar melalui kaedah getElementById, dan kemudian mengikat pengendali acara klik padanya menggunakan kaedah addEventListener. Dalam fungsi pemprosesan acara, atribut sasaran acara objek acara digunakan untuk mendapatkan elemen yang mencetuskan peristiwa, iaitu elemen menggelegak. Kemudian, kita mendapat id elemen gelembung melalui atribut id elemen sasaran. Akhir sekali, kami menggunakan kaedah console.log untuk mencetak id elemen berbuih ke konsol penyemak imbas.

Apabila kita mengklik butang pada halaman, acara akan menggelembung ke div luar, dan kemudian kita dapat melihat output id bagi elemen berbuih dalam konsol.

Melalui contoh kod di atas, kami dapat memahami dengan jelas cara mendapatkan elemen gelembung dalam JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen menggelegak dalam acara js menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!