Pahami secara singkat proses penggelembungan, delegasi, pengikatan, dan penyebaran peristiwa JavaScript

Peristiwa yang menggelembung

1. : Peristiwa yang menggelembung berarti bahwa peristiwa tersebut awalnya diterima oleh elemen yang paling spesifik dan kemudian menyebar ke atas ke node yang kurang spesifik.
2. Gelembung peristiwa diaktifkan secara default, tetapi gelembung peristiwa dapat dikontrol melalui kode js.

Fitur:

• Ketika fungsi event kita dipicu, fungsi event akan benar-benar menerima objek event.

• Ketika kita menjalankan metode event.stopPropagation() di fungsi event kita, gelembung event berakhir di sini.

• Tidak semua jenis acara mendukung penggelembungan acara.

• Event bubble hanya akan memicu fungsi event dengan tipe yang sama.

Dua cara untuk mencegah kejadian bubbling

Ada dua cara untuk mencegah kejadian bubbling, yang satu adalah properti dan yang lainnya adalah metode.

cancelBubble

menetapkan atau mengembalikan apakah acara tersebut harus disebarkan ke tingkat atas.

Sintaks: event.cancelBubble = true;

stopPropagation()

mencegah acara menyebar lebih jauh di aliran acara.

Sintaks: event.stopPropagation();

Contoh: Mengikat fungsi respons klik ke tiga objek yang merupakan induk dan anak.

jendela.onload = fungsi(){
      var span = dokumen.getElementById("sp");
      span.onclick = fungsi(){
          alert('tag rentang');
          
      }
      var kotak = dokumen.getElementById('box3');
      box3.onclick = fungsi(){
          peringatan('kotak3');
      }
      var body = dokumen.body;
      body.onclick = fungsi(){
          waspada('tubuh');
      }}

Cegah gelembung pada kotak:

jendela.onload = fungsi(){
      var span = dokumen.getElementById("sp");
      span.onclick = fungsi(){
          alert('tag rentang');
          
      }
      var kotak = dokumen.getElementById('box3');
      box3.onclick = fungsi(acara){
          peringatan('kotak3');
           acara.stopPropagation();

      }
      var body = dokumen.body;
      body.onclick = fungsi(){
          waspada('tubuh');
      }}

Mendelegasikan peristiwa

Ketika kita memiliki sekelompok sub-tag dengan peristiwa yang sama, kita dapat menambahkan peristiwa ke dalamnya dengan menelusuri sub-tag tersebut, namun jika elemen sub-tag baru ditambahkan, kita harus mengikat kembali sub-tag baru tersebut elemen, jika tidak maka tidak valid.

Atribut tersebut

mengikat peristiwa ke elemen leluhur , sehingga ketika peristiwa pada elemen turunan dipicu, peristiwa tersebut akan menggelembung ke elemen leluhur , dan peristiwa tersebut akan diproses melalui peristiwa respons elemen leluhur. Dengan menggunakan penggelembungan dan delegasi, Anda dapat mengurangi jumlah pengikatan peristiwa dan meningkatkan kinerja program.

Dapatkan elemen yang diklik.

Setelah kita mengikat suatu peristiwa ke elemen leluhur, tidak peduli elemen mana yang kita klik di dalam elemen leluhur, peristiwa terkait akan terpicu Saat ini, kita perlu memberikan kondisi penilaian, apakah elemen tersebut ingin kita picu atau tidak.

target

mengembalikan elemen yang memicu peristiwa tersebut.

Sintaks: event.taget;

jendela.onload = fungsi(){
     var ul = dokumen.getElementById('ul1');
     ul.onclick = fungsi(acara){
         if(event.target.className == 'abq'){
             alert('Acara dipicu!!')
         } 
     }
     //Tambahkan hyperlink document.getElementById('bt1').onclick = function(){
         var li = dokumen.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Tag baru</a>";
         ul.appendChild(li);
     }
 }

Ikat peristiwa melalui addEventListener().

Melalui metode ini, Anda dapat mengikat beberapa fungsi respons peristiwa yang identik ke elemen yang sama.

• Parameter:

1. String acara, jangan gunakan
2. fungsi panggilan balik. Fungsi ini akan dipanggil ketika acara dipicu.
3. Apakah untuk memicu acara dalam fase penangkapan memerlukan nilai Boolean

. untuk mengikat peristiwa yang sama ke suatu elemen pada waktu yang sama. Tentukan beberapa fungsi respons, sehingga ketika peristiwa tersebut dipicu, fungsi respons akan dieksekusi sesuai urutan pengikatan fungsi tersebut!

jendela.onload = fungsi(){
    var bt = dokumen.getElementById('bt1');
    bt.addEventListener('klik',fungsi(){
        alert('Fungsi terkait klik pertama terpicu!')
    },PALSU);
    bt.addEventListener('klik',fungsi(){
        alert('Fungsi terkait klik kedua terpicu!')
    },PALSU);
    bt.addEventListener('klik',fungsi(){
        alert('Fungsi terkait klik ketiga terpicu!')
    }, false);}

Penyebaran peristiwa

• Netscape dan Microsoft mempunyai pemahaman berbeda mengenai penyebaran peristiwa:
  Microsoft percaya bahwa peristiwa harus disebarkan dari dalam ke luar , yaitu ketika suatu peristiwa dipicu, peristiwa pada elemen saat ini harus dipicu terlebih dahulu, dan kemudian disebarkan ke elemen leluhur dari elemen saat ini, yang berarti bahwa peristiwa tersebut harus dieksekusi pada tahap bubble .
  Netscape percaya bahwa peristiwa harus disebarkan dari luar ke dalam , yaitu ketika peristiwa saat ini dipicu, peristiwa dari elemen leluhur terluar dari elemen saat ini harus dipicu terlebih dahulu, dan kemudian disebarkan ke dalam ke elemen turunannya.
• W3C menggabungkan solusi dari kedua perusahaan dan membagi propagasi peristiwa menjadi tiga tahap:

1. tahap penangkapan, peristiwa ditangkap dari elemen leluhur terluar ke elemen target, namun secara default peristiwa tersebut tidak akan dipicu saat ini. .
2. Peristiwa fase target menangkap elemen target, dan penangkapan berakhir dan mulai memicu peristiwa pada elemen target.
3. Peristiwa fase gelembung diteruskan dari elemen target ke elemen leluhurnya, yang secara bergantian memicu peristiwa pada elemen leluhur.

Fungsi respons dijalankan selama fase penggelembungan. Parameter default ketiga adalah false

window.onload = function(){
     var box1 = dokumen.getElementById('box1');
     var box2 = dokumen.getElementById('box2');
     var box3 = dokumen.getElementById('box3');
     box1.addEventListener('klik',fungsi(){
         peringatan('kotak1');
     },PALSU);
     box2.addEventListener('klik',fungsi(){
         peringatan('kotak2');
     },PALSU);
     box3.addEventListener('klik',fungsi(){
         peringatan('kotak3');
     },PALSU);
 }

Jika Anda ingin memicu peristiwa selama fase pengambilan, Anda dapat menyetel parameter ketiga addEventListener() ke true!

jendela.onload = fungsi(){
     var box1 = dokumen.getElementById('box1');
     var box2 = dokumen.getElementById('box2');
     var box3 = dokumen.getElementById('box3');
     box1.addEventListener('klik',fungsi(){
         peringatan('kotak1');
     },BENAR);
     box2.addEventListener('klik',fungsi(){
         peringatan('kotak2');
     },BENAR);
     box3.addEventListener('klik',fungsi(){
         peringatan('kotak3');
     },BENAR);
 }