Kuasai mekanisme menggelegak acara biasa dalam JavaScript

Peristiwa menggelegak biasa dalam JavaScript: Untuk menguasai ciri menggelegak acara biasa, contoh kod khusus diperlukan

Pengenalan:
Dalam JavaScript, acara menggelegak bermakna peristiwa akan bermula dari elemen dengan tahap bersarang paling dalam ke luar Unsur lapisan dibiakkan sehingga mencapai unsur induk terluar. Memahami dan menguasai acara menggelegak biasa boleh membantu kami mengendalikan interaksi pengguna dan pengendalian acara dengan lebih baik. Artikel ini akan memperkenalkan beberapa peristiwa menggelegak biasa dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik.

1. Acara klik (klik):

Acara klik ialah acara menggelegak yang paling biasa. Apabila pengguna mengklik pada elemen pada halaman, peristiwa klik pada elemen akan dicetuskan, dan kemudian disebarkan ke elemen luar langkah demi langkah sehingga peristiwa klik unsur induk paling luar dicetuskan.

Kod sampel HTML:

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

Kod JavaScript:

document.getElementById('outer').addEventListener('click', function() {
  console.log('outer clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('inner clicked');
});

document.getElementById('btn').addEventListener('click', function() {
  console.log('button clicked');
});

Apabila butang diklik, konsol akan mengeluarkan hasil berikut:

button clicked
inner clicked
outer clicked

2. Acara Mousemove (mousemove):

Mousemove juga merupakan acara biasa. . Apabila pengguna menggerakkan tetikus pada halaman, peristiwa pergerakan tetikus akan disebarkan ke elemen luar langkah demi langkah.

Kod sampel HTML:

<div id="outer">
  <div id="inner">
    <button id="btn">移动鼠标</button>
  </div>
</div>

Kod JavaScript:

document.getElementById('outer').addEventListener('mousemove', function() {
  console.log('outer mousemove');
});

document.getElementById('inner').addEventListener('mousemove', function() {
  console.log('inner mousemove');
});

document.getElementById('btn').addEventListener('mousemove', function() {
  console.log('button mousemove');
});

Apabila tetikus bergerak pada butang, konsol akan mengeluarkan hasil berikut:

button mousemove
inner mousemove
outer mousemove

3. Acara tekan papan kekunci (keydown):

Acara tekan papan kekunci juga akan gelembung sehingga unsur luar. Apabila pengguna menekan sebarang kekunci pada papan kekunci pada halaman, peristiwa penekanan papan kekunci akan disebarkan ke elemen luar langkah demi langkah.

Kod contoh HTML:

<div id="outer">
  <div id="inner">
    <input id="input" type="text" placeholder="按下键盘">
  </div>
</div>

Kod JavaScript:

document.getElementById('outer').addEventListener('keydown', function() {
  console.log('outer keydown');
});

document.getElementById('inner').addEventListener('keydown', function() {
  console.log('inner keydown');
});

document.getElementById('input').addEventListener('keydown', function() {
  console.log('input keydown');
});

Apabila papan kekunci ditekan dalam kotak input, konsol akan mengeluarkan hasil berikut:

input keydown
inner keydown
outer keydown

Kesimpulan:
Melalui beberapa contoh acara menggelegak biasa di atas, pelajari tentang aplikasi acara menggelegak dalam JavaScript. Menguasai acara menggelegak boleh membantu kami mengendalikan interaksi pengguna dan pengendalian acara dengan lebih baik. Perlu diingat bahawa sesetengah acara tidak akan menggelegak, seperti acara fokus, acara bentuk, dll., tetapi acara DOM yang paling biasa akan menggelegak. Semasa proses pembangunan, kita harus memilih jenis acara yang sesuai untuk pemprosesan mengikut keperluan, dan melaraskan logik pemprosesan mengikut ciri menggelegak acara. Kami berharap melalui pengenalan dan contoh kod artikel ini, pembaca dapat memahami dengan lebih baik konsep acara menggelegak dan menerapkannya pada projek mereka sendiri.

Atas ialah kandungan terperinci Kuasai mekanisme menggelegak acara biasa dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!