Rumah >hujung hadapan web >tutorial js >Peringkat acara DOM dan tangkapan acara dan urutan pelaksanaan menggelegak acara (penjelasan grafik dan teks terperinci)_jquery

Peringkat acara DOM dan tangkapan acara dan urutan pelaksanaan menggelegak acara (penjelasan grafik dan teks terperinci)_jquery

WBOYasal: 2016-05-16 15:44:251937semak imbas

Bak kata pepatah, ingatan yang baik tidaklah sebaik pena yang buruk Jika anda tidak memahami begitu banyak artikel teknikal, ia akan mudah melupakan perkara teknikal di bawah ini editor biasanya menyemak imbas, dan nota yang saya kumpulkan untuk dikongsi dengan anda.

Semasa proses pembangunan, kita semua berharap untuk menggunakan rangka kerja matang orang lain, kerana berdiri di atas bahu gergasi akan meningkatkan kecekapan pembangunan kita. Walau bagaimanapun, kita juga harus dan mesti memahami prinsip asasnya. Contohnya, untuk acara DOM, rangka kerja jquery membantu kami merangkum dan mengabstrakkan gelagat berbeza dari pelbagai penyemak imbas, membawa kemudahan besar kepada pemprosesan acara. Walau bagaimanapun, penyemak imbas secara beransur-ansur menjadi bersatu dan diseragamkan, dan kami boleh menggunakan antara muka standard rasmi dengan lebih selamat. Kerana hanya dengan memenangi hati dan minda ramai pembangun boleh pelayar pergi lebih jauh. Sama seperti apabila kami menggunakan penyemak imbas versi yang lebih rendah untuk membuka halaman tertentu, kami akan diberitahu untuk menggunakan penyemak imbas lanjutan seperti Chrome untuk mengaksesnya. Tetapi ini adalah proses revolusioner Untuk menjadikan Halaman web kami memberi perkhidmatan yang lebih baik kepada lebih ramai orang, kami kini harus lebih serasi dengan isu sejarah ini. Untuk menjadi serasi, selain bergantung pada rangka kerja, kita mesti memahami prinsip asasnya.

Tiga peringkat acara DOM

Apabila peristiwa DOM dicetuskan, ia tidak hanya dicetuskan sekali pada objek itu sendiri, tetapi akan melalui tiga peringkat berbeza:

1. Fasa tangkapan : Mula-mula, pergi dari dokumen nod akar dokumen ke objek pencetus peristiwa, dan tangkap objek peristiwa dari luar ke dalam;

2. Peringkat sasaran : Tiba di lokasi acara sasaran (tempat kejadian) dan cetuskan acara

3. Peringkat gelembung : Kemudian jejak kembali dari lokasi acara sasaran ke nod akar dokumen, dan gelembungkan objek acara dari dalam ke luar.

Sumber petikan:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Tertib tangkapan acara dan acara menggelegak jelas.

Bahagian percubaan

Buka editor dalam talian:

http://jsbin.com/goqede/edit?html,css,js,output

Kod adalah seperti berikut:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
     #outer{
       text-align: center;
       width: px;
       height: px;
       background-color: #ccc;
       margin: auto;
     }
     #middle{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
     }
     #inner{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
       border-rad
     }
   </style>
 </head>
 <body>
   <div id='outer'>
     <span>outer</span>
     <div id='middle'>
       <span>middle</span>
       <div id='inner'>
         <span>inner</span>
       </div>
     </div>
   </div>
   <script>
     function $(element){
       return document.getElementById(element);
     }
     function on(element,event_name,handler,use_capture){
       if(addEventListener){
         $(element).addEventListener(event_name,handler,use_capture);
       }
       else{
         $(element).attachEvent('on'+event_name,handler);
       }
     }
     on("outer","click",o_click_c,true);
     on("middle","click",m_click_c,true);
     on("inner","click",i_click_c,true);
     on("outer","click",o_click_b,false);
     on("middle","click",m_click_b,false);
     on("inner","click",i_click_b,false);
     function o_click_c(){
       console.log("outer_捕获");
       alert("outer_捕获");
     }
     function m_click_c(){
       console.log("middle_捕获")
       alert("middle_捕获");
     }
     function i_click_c(){
       console.log("inner_捕获")
       alert("inner_捕获");
     }
     function o_click_b(){
       console.log("outer_冒泡")
       alert("outer_冒泡");
     }
     function m_click_b(){
       console.log("middle_冒泡")
       alert("middle_冒泡");
     }
     function i_click_b(){
       console.log("inner_冒泡")
       alert("inner_冒泡");
     }
   </script>
 </body>
 </html>

Apabila kita klik inner hasilnya ialah:

penangkapan_luar

tangkap_tengah

penangkapan_dalaman

gelembung_dalaman

gelembung_tengah

gelembung_luar

Adalah dapat dilihat bahawa peristiwa itu ditangkap dari luar ke dalam dahulu, sehingga elemen peristiwa dicapai, dan kemudian menggelembung ke nod akar dari dalam ke luar

petua:

Apabila sesuatu peristiwa dicetuskan dalam peringkat sasaran, ia akan dilaksanakan mengikut susunan pendaftaran acara. Maksudnya, jika kedua-dua acara menggelegak dan acara tangkapan didaftarkan di sini, ia akan dilaksanakan mengikut urutan pendaftaran.

Sebagai contoh, apabila saya klik inner, mengikut susunan di atas, jawapannya memang jawapan yang kita mahukan:

Apabila urutan pendaftaran acara saya ditukar kepada kod berikut:

Apabila kita klik luar:

Apabila kita klik pada tengah:

Apabila kita klik dalam:

Dapat dilihat bahawa susunan pelaksanaan acara pada elemen acara dalam peringkat sasaran ditentukan oleh susunan pendaftaran acara

Kandungan di atas ialah peringkat acara DOM dan urutan pelaksanaan tangkapan acara dan acara menggelegak dalam artikel ini (gambar dan teks terperinci saya harap ia akan membantu kerja dan kajian masa depan semua orang).

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

Artikel sebelumnya：jquery melaksanakan kod kesan khas pengindahan kotak lungsur pilihArtikel seterusnya：jquery melaksanakan kod kesan khas pengindahan kotak lungsur pilih

Artikel berkaitan

Lihat lagi