Analisis ringkas tentang mekanisme acara dalam pengetahuan JavaScript

Analisis ringkas tentang mekanisme acara dalam pengetahuan JavaScript_Basic

WBOY

Lepaskan： 2016-05-16 15:56:44

asal

1386 orang telah melayarinya

Apakah acara itu?

JavaScript berinteraksi dengan HTML melalui peristiwa yang berlaku pada halaman apabila pengguna atau penyemak imbas memanipulasinya.

Apabila halaman dimuatkan, ini ialah acara. Apabila pengguna mengklik butang, ini adalah acara. Satu lagi contoh peristiwa adalah seperti menekan sebarang kekunci, menutup tetingkap, mengubah saiz tetingkap, dsb.

Pembangun boleh menggunakan acara ini untuk melaksanakan respons berkod JavaScript, yang menyebabkan butang menutup tetingkap, mesej dipaparkan kepada pengguna, data disahkan dan hampir semua jenis respons lain yang boleh berlaku.

Acara ialah Tahap 3 Model Objek Dokumen (DOM). Setiap elemen HTML mempunyai set acara yang boleh mencetuskan kod JavaScript.

Contoh:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Salin selepas log masuk

Ini akan menghasilkan hasil berikut, apabila anda mengklik butang "Hello", maka acara onclick akan mencetuskan fungsi sayHello().

jenis acara semasa hantar:

Satu lagi jenis acara paling penting ialah semasa diserahkan. Peristiwa ini dibangkitkan apabila percubaan dibuat untuk menyerahkan borang. Oleh itu, anda boleh menyasarkan pengesahan borang kepada jenis acara ini.

Berikut ialah contoh mudah untuk menggambarkan penggunaannya. Di sini, kami memanggil fungsi validate() sebelum menyerahkan data borang ke pelayan web. Fungsi validate() mengembalikan benar jika borang akan diserahkan, jika tidak, data tidak akan diserahkan.
Contoh:

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
  all validation goes here
  .........
  return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

Salin selepas log masuk

onmouseover dan onmouseout:

Dua jenis acara ini akan membantu menghasilkan kesan yang bagus dengan gambar atau pun teks. Apabila tetikus diletakkan pada mana-mana elemen, peristiwa onmouseout berlaku apabila tetikus dialihkan keluar dari elemen, dan peristiwa onmouseover berlaku apabila tetikus bergerak ke atas.
Contoh:

Contoh berikut menunjukkan bahawa respons kumpulan adalah seperti berikut:

<html>
<head>
<script type="text/javascript">
<!--
function over() {
  alert("Mouse Over");
}
function out() {
  alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Salin selepas log masuk

Anda boleh menggunakan dua jenis acara ini untuk menukar imej yang berbeza dan juga mencipta pengguna untuk membantu anda.
Acara standard HTML 4

Acara HTML4 standard disenaraikan di sini untuk rujukan anda. Skrip di bawah memaparkan fungsi Javascript untuk dilaksanakan pada acara ini.

201564104949263.jpg (616×728)