Acara HTML
Sep 04, 2024 pm 04:14 PMDalam halaman web atau tapak web yang dibuat menggunakan skrip HTML (HyperText Markup Language), setiap tindakan yang dilakukan oleh pengguna dan alat web itu sendiri dipanggil Acara HTML. Perihalan mengandungi enam jenis atribut untuk setiap Peristiwa: atribut acara tetingkap, atribut acara bentuk, atribut acara papan kekunci, atribut acara tetikus, atribut acara media dan atribut acara papan keratan. Setiap atribut acara ini akan mempunyai atribut khusus khusus yang digunakan untuk mengambil butiran Acara HTML.
Jenis Acara HTML yang Berbeza
Terdapat banyak atribut acara yang tersedia dalam HTML5, yang dikelaskan terutamanya kepada 6 jenis yang berbeza. Atribut ini berfungsi menggunakan bahasa JavaScript.
-
?Atribut Acara Windows:?Ini disediakan untuk tindakan objek windows. Ia berfungsi dalam tag badan?
. - ?Borang Atribut Acara:?Jika pengguna melakukan beberapa tindakan dalam borang seperti data input, batalkan, serahkan, maka atribut acara ini berfungsi.
- ?Atribut Acara Papan Kekunci:?Atribut acara papan kekunci ini digunakan untuk tindakan papan kekunci dan interaksi pengguna.
- ?Atribut Acara Tetikus:?Atribut acara tetikus yang digunakan untuk tindakan tetikus iaitu bergerak, klik, roda, dsb.
- ?Atribut Acara Papan Keratan: Atribut acara ini digunakan untuk tindakan papan keratan: contoh, potong, salin, perosak.
- ?Atribut Acara Media: Atribut acara ini berfungsi pada fail media seperti video dll.
Penerangan Atribut Acara
Berikut ialah beberapa penjelasan tentang atribut acara yang diberikan di bawah secara terperinci:
1. Atribut Acara Windows
|
Penerangan |
||||||||||||||||||||||||||||||||
onafterprint | Namun, skrip ini bertindak selepas dokumen dicetak. | ||||||||||||||||||||||||||||||||
pada sebelum dicetak | Namun, skrip ini bertindak sebelum dokumen dicetak. | ||||||||||||||||||||||||||||||||
onbeforeunload | Manakala sebelum dokumen yang dipunggah, Skrip ini berfungsi. | ||||||||||||||||||||||||||||||||
satu kesilapan | ?Dalam dokumen berlaku Ralat kemudian peristiwa ini dilaksanakan. | ||||||||||||||||||||||||||||||||
onhashchange | ?Bahagian utama perubahan URL dalam dokumen yang peristiwa masa itu dilaksanakan. | ||||||||||||||||||||||||||||||||
dimuat | Apabila halaman Web pertama dimuatkan sepenuhnya, maka acara ini dilaksanakan. | ||||||||||||||||||||||||||||||||
pada mesej | Dalam dokumen, mesej yang berlaku pada peristiwa masa itu dilaksanakan. | ||||||||||||||||||||||||||||||||
dalam talian | Jika sambungan rangkaian tidak tersedia dan penyemak imbas berkata di luar talian, maka acara itu dilaksanakan. | ||||||||||||||||||||||||||||||||
dalam talian | Apabila rangkaian tersedia dalam penyemak imbas, maka acara itu dilaksanakan. | ||||||||||||||||||||||||||||||||
onpagehide | Tindakan skrip ini; jika pengguna tidak bekerja pada halaman web semasa, halaman semasa boleh disembunyikan. | ||||||||||||||||||||||||||||||||
onpageshow | Skrip ini bertindak pada masa itu halaman web semasa dimuatkan. | ||||||||||||||||||||||||||||||||
onpopstate | Skrip ini berfungsi secara automatik pada penyemak imbas untuk perubahan keadaan sejarah. | ||||||||||||||||||||||||||||||||
onresize | Skrip ini bertindak apabila penyemak imbas tetingkap menukar saiz. | ||||||||||||||||||||||||||||||||
penyimpanan | Apabila storan web pengguna dikemas kini, maka acara itu dilaksanakan. | ||||||||||||||||||||||||||||||||
memuat turun | Halaman web semasa pengguna tidak dimuatkan atau tetingkap ditutup, kemudian acara itu dilaksanakan. |
2. Bentuk Atribut Acara
Attribute | Description |
onblur | Some form validation object loos the focus, then event fired. |
onchange | The value change in the form, then event fired. |
onfocus | In the form , , |
oninput | The user gives input of value in the form then this event fired. |
oninvalid | The event works on when the element does not satisfy its predefined constraints. |
onreset | User reset the form information, then event fired. |
onsearch | Users search the required field, then event fired. |
onselect | The user selects the text or text area in form, then event fired. |
onsubmit | The user submits the form at the end then the event fired. |
3. Atribut Acara Papan Kekunci
Attribute | ? ?Description |
onkeydown | Using a keyboard, the user press the key down at that point event works |
onkeypress | Using the keyboard, users press the key and display characters at that point event works. |
onkeyup | After the press, the key user releases the key then the event works. |
4. Atribut Acara Tetikus
? ?Attribute | Description |
onclick | The user clicks the mouse on the button then an event occurred. |
ondblclick | Users double click the mouse then the event occurred. |
onmousedown | The user presses the mouse button on the element then the event occurred. |
onmousemove | The user moves the mouse pointer over the element then the event occurred. |
onmouseout | The user moves the mouse outside of the element then the event occurred. |
onmouseover | ?The user moves the mouse over the element then the event occurred. |
onmouseup | The user released the mouse button then the event occurred. |
onmousewheel | Using the mouse wheel user rolls the up and down on element then the event occurred. |
onwheel | Using a mouse wheel user roll them up and down then the event occurred. |
5. Atribut Acara Papan Klip
?Attribute | Description |
oncopy | Using mouse users to copy the content, then the event occurred. |
oncut | Using a mouse, users cut the content then the event occurred. |
onpaste | Using a mouse user, paste the content, then an event occurred. |
6. Atribut Acara Media
Attribute | Description |
onabort | When media files aborted for download and play again, then an event occurs. |
oncanplay | When any media file ready for play, then this trigger is fired. |
oncanplaythrough | Media file ready to play without buffering and loading. |
oncuechange | Element changes the cue of |
ondurationchange | The Media file changes the length of time then the trigger is fired. |
onemptied | If the Media file unavailable and come fatal error, then the trigger is fired. |
onended | The Media file comes on endpoint then the trigger is fired. |
onerror | When an error occurred to get the media file, the trigger is fired |
onloadeddata | The Media file loads the data then the trigger is fired. |
onloadedmetadata | The Media file loads the metadata then the trigger is fired. |
onloadstart | The Media file starts to load then the trigger is fired. |
onpause | The Media file paused to play again then the trigger is fired. |
onplay | Media file ready to play, then trigger is fired. |
onplaying | The Media file starts to play when the trigger is fired. |
onprogress | This script act when the browser is working on connecting with the media data. |
onratechange | If the videos playback speed is changed, then the trigger is fired. |
onseeked | Users completed moving; otherwise, skip the new position of video. this attribute set as false. |
onseeking | The user wants to move; otherwise, skip the new position of the video. this attribute set as true. |
onstalled | When the browser suddenly stops to the connection of data, then the event works. |
onsuspend | When the web Browser on purpose does not get media data, then events work. |
ontimeupdate | When a user changes the video play position like forward and backward. |
onvolumechange | To change media volume low to high. |
onwaiting | If the data load the information, current video stop with buffering then event works. |
Kesimpulan
Acara Html ialah cara mudah untuk mengambil tindakan dan antara muka antara penyemak imbas web dan pengguna. Pengguna boleh mendapatkan reaksi setiap tindakan tanpa susah payah. Contohnya, potong dan salin untuk papan keratan, gerakkan dan klik untuk tetikus, butang untuk borang. Acara menjadikan aplikasi web dalam masa nyata dan membuat sistem kerja pintar.
Atas ialah kandungan terperinci Acara HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

HTML5, CSS dan JavaScript harus digabungkan dengan tag semantik, pesanan pemuatan yang munasabah dan reka bentuk decoupling. 1. Gunakan tag semantik HTML5, seperti meningkatkan kejelasan struktur dan penyelenggaraan, yang kondusif untuk SEO dan akses bebas penghalang; 2. CSS harus diletakkan, gunakan fail luaran dan berpecah oleh modul untuk mengelakkan gaya sebaris dan masalah pemuatan yang tertunda; 3. JavaScript disyorkan untuk diperkenalkan di hadapan, dan gunakan penangguhan atau async untuk memuat secara asynchronously untuk mengelakkan menyekat rendering; 4. Mengurangkan pergantungan yang kuat antara ketiga-tiga, tingkah laku memandu melalui atribut data dan status kawalan nama kelas, dan meningkatkan kecekapan kerjasama melalui spesifikasi penamaan bersatu. Kaedah ini dapat mengoptimumkan prestasi halaman dengan berkesan dan bekerjasama dengan pasukan.

Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini

Metadata dalam htmlhead adalah penting untuk SEO, perkongsian sosial, dan tingkah laku penyemak imbas. 1. Tetapkan tajuk halaman dan perihalan, gunakan dan simpannya ringkas dan unik; 2. Tambahkan maklumat kad OpenGraph dan Twitter untuk mengoptimumkan kesan perkongsian sosial, perhatikan saiz imej dan gunakan alat penyahpepijatan untuk menguji; 3. Tentukan set aksara dan tetapan Viewport untuk memastikan sokongan pelbagai bahasa disesuaikan dengan terminal mudah alih; 4. Tag pilihan seperti Hak Cipta Pengarang, Kawalan Robot dan Canonical Mencegah Kandungan Duplikat juga harus dikonfigurasi dengan munasabah.

Lebih mudah untuk menghantar data borang menggunakan API FormData HTML5. 1. Ia secara automatik boleh mengumpul medan borang dengan atribut nama atau menambah data secara manual; 2. Ia menyokong penyerahan dalam format multipart/form-data melalui FETCH atau XMLHTTPREQUEST, yang sesuai untuk muat naik fail; 3. Apabila memproses fail, anda hanya perlu memasukkan fail ke FormData dan menghantar permintaan; 4. Perhatikan bahawa medan nama yang sama akan ditimpa, dan penukaran JSON dan tiada struktur bersarang perlu dikendalikan.

Ia adalah elemen peringkat blok, sesuai untuk susun atur; Ia adalah elemen sebaris, sesuai untuk membungkus kandungan teks. 1. Secara eksklusif menduduki garis, lebar, ketinggian dan margin boleh ditetapkan, yang sering digunakan dalam susun atur struktur; 2. Tiada garis pecah, saiz ditentukan oleh kandungan, dan sesuai untuk gaya teks tempatan atau operasi dinamik; 3. Apabila memilih, ia harus dihakimi berdasarkan sama ada kandungan memerlukan ruang bebas; 4. Ia tidak boleh bersarang dan tidak sesuai untuk susun atur; 5. Keutamaan diberikan kepada penggunaan label semantik untuk meningkatkan kejelasan struktur dan kebolehcapaian.

MSE (MediaSourceExtensions) adalah sebahagian daripada piawaian W3C, yang membolehkan JavaScript membina aliran media secara dinamik, dengan itu membolehkan keupayaan main balik video canggih. Ia menguruskan sumber media melalui MediaSource, menyimpan data dari SourceBuffer, dan mewakili jangkauan masa penimbal melalui masa, yang membolehkan penyemak imbas untuk memuatkan dan menyahkod klip video secara dinamik. Proses menggunakan MSE termasuk: ① Buat contoh MediaSource; ② mengikatnya ke elemen; ③ Tambah SourceBuffer untuk menerima data dalam format tertentu; ④ Dapatkan data segmen melalui mengambil () dan masukkannya ke penampan. Langkah berjaga -jaga yang biasa termasuk: ① Isu keserasian format; ② Pasangan setem masa

Tag HTML5 boleh secara langsung melaksanakan bar kemajuan laman web. 1. Penggunaan asas adalah untuk menetapkan nilai dan atribut maksimum, seperti memaparkan kemajuan 30%; 2 Jika kemajuan tidak diketahui, nilai boleh ditinggalkan dan hanya menetapkan max, yang bermaksud keadaan yang tidak menentu; 3. Anda boleh menyesuaikan gaya melalui CSS, dan keserasian penyemak imbas perlu dikendalikan; 4. Ia sering digunakan dalam senario seperti memuat naik fail, membentuk kemajuan, dan pemuatan permainan; 5. Beri perhatian untuk mengelakkan menggunakannya apabila tugas selesai terlalu cepat, dan pertimbangkan isu keserasian versi lama IE.

Kelas, ID, Gaya, Data, dan Tajuk adalah atribut global yang paling biasa digunakan dalam HTML. Kelas digunakan untuk menentukan satu atau lebih nama kelas untuk memudahkan tetapan gaya dan operasi JavaScript; ID menyediakan pengenal unik untuk elemen, sesuai untuk lompatan sauh dan kawalan JavaScript; Gaya membolehkan gaya sebaris ditambah, sesuai untuk debugging sementara tetapi tidak disyorkan untuk kegunaan besar-besaran; sifat data digunakan untuk menyimpan data tersuai, yang mudah untuk interaksi front-end dan back-end; Tajuk digunakan untuk menambah arahan tetikus, tetapi gaya dan kelakuannya terhad oleh penyemak imbas. Pemilihan yang munasabah sifat -sifat ini dapat meningkatkan kecekapan pembangunan dan pengalaman pengguna.
