Rumah  >  Artikel  >  hujung hadapan web  >  Contoh acara biasa disokong oleh acara menggelegak

Contoh acara biasa disokong oleh acara menggelegak

PHPz
PHPzasal
2024-02-18 15:35:06882semak imbas

Contoh acara biasa disokong oleh acara menggelegak

Acara menggelegak bermakna dalam DOM, apabila elemen mencetuskan acara, acara itu akan dicetuskan langkah demi langkah daripada elemen itu ke elemen atas sehingga elemen akar dicetuskan atau berhenti menggelegak. Semasa proses ini, kedua-dua unsur induk dan unsur nenek moyang mempunyai peluang untuk menangkap dan mengendalikan peristiwa yang dicetuskan. Artikel ini akan menggunakan contoh untuk menganalisis peristiwa biasa yang menyokong peristiwa menggelegak.

  1. Acara klik (klik)
    Acara klik ialah salah satu acara yang paling biasa. Apabila tetikus mengklik pada elemen, peristiwa klik bukan sahaja akan dicetuskan pada elemen, tetapi juga peristiwa klik pada elemen induk dan elemen moyang akan dicetuskan secara bergilir-gilir. Sebagai contoh, jika anda mengklik tetikus pada butang, bukan sahaja peristiwa klik butang akan dicetuskan, tetapi juga peristiwa klik div yang mengandungi butang dan peristiwa klik elemen badan yang mengandungi div.
  2. Acara mousemove (mousemove)
    Mousemove juga menyokong acara menggelegak. Apabila tetikus bergerak pada halaman, acara mousemove akan dicetuskan daripada elemen pada kedudukan semasa tetikus dan menggelembung ke elemen akar. Ini bermakna jika anda menggerakkan tetikus dalam bekas yang mengandungi berbilang div, peristiwa pergerakan akan menyala pada setiap div.
  3. Acara tuding (masuk tetikus)
    Acara tuding dicetuskan apabila tetikus memasuki elemen, dan turut menyokong acara menggelegak. Jika anda menggunakan acara mouseenter untuk mengikat ke div, apabila tetikus memasuki div, acara itu akan menggelembung ke elemen induknya, elemen nenek moyang dan sehingga elemen akarnya. Ini bermakna jika anda memasuki kawasan div kanak-kanak dalam elemen div bersarang, kedua-dua div anak dan div induk akan mencetuskan acara mouseenter.
  4. Acara fokus (fokus)
    Acara fokus merujuk kepada peristiwa yang dicetuskan apabila pengguna memilih (memfokus) elemen. Apabila kotak input difokuskan, acara fokus akan menggelembung dari kotak input ke div, elemen badan dan juga elemen akar yang mengandungi kotak input. Ini membolehkan kami memanfaatkan ciri menggelegak acara untuk melaksanakan beberapa operasi logik berkaitan fokus dengan mudah.
  5. Acara papan kekunci (keydown, keyup)
    Acara papan kekunci merujuk kepada peristiwa yang dicetuskan apabila pengguna menekan atau melepaskan kekunci pada papan kekunci. Walaupun acara papan kekunci tidak biasa digunakan dalam acara menggelegak, dalam beberapa senario tertentu, kesan menggelegak boleh digunakan untuk mengendalikan peristiwa penting. Sebagai contoh, jika anda menekan kekunci dalam borang dengan berbilang input, peristiwa kekunci akan menggelembung daripada elemen input semasa ke elemen peringkat atas keseluruhan borang.

Untuk meringkaskan, acara biasa yang menyokong acara menggelegak termasuk acara klik, acara pergerakan tetikus, acara tuding, acara fokus dan acara papan kekunci. Dengan memahami ciri menggelegak peristiwa ini, kita boleh memahami dengan lebih baik mekanisme penyebaran peristiwa dalam DOM dan secara fleksibel menerapkannya dalam pembangunan sebenar.

Atas ialah kandungan terperinci Contoh acara biasa disokong oleh acara menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn