masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Acara biasa JavaScript

Selain acara onclick yang baru disebut, terdapat juga acara yang biasa digunakan ini:

  • onclick click

  • ondblclick double click

  • onfocus Elemen mendapat fokus

  • onblur Elemen hilang fokus

  • onmouseover Tetikus bergerak ke atas elemen

  • onmouseout Tetikus bergerak menjauhi elemen

  • onmousedown Butang tetikus ditekan

  • onkeyup mouse Kekunci dilepaskan

  • onkeydown Kekunci papan kekunci ditekan

  • onkeyup Kekunci papan kekunci tertentu dilepaskan

  • onkeypress Kekunci papan kekunci ditekan dan dilepaskan

Antaranya, peristiwa onmouseover dan onmouseout boleh digunakan untuk mencetuskan fungsi apabila tetikus bergerak keluar-masuk HTML unsur . Contohnya, contoh ini: 

<html>
<head></head>
<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
onmouseover="this.innerHTML='good'"
onmouseout="this.innerHTML='you have moved out'"
>move your mouse to here</div>
</body>
</html>

Apabila tetikus dialihkan, "baik" dipaparkan dan apabila tetikus dialihkan keluar, "anda telah berpindah keluar" dipaparkan:

0402.gif

onmousedown, onmouseup Ia ialah peristiwa menekan dan melepaskan tetikus. Pertama, apabila butang tetikus diklik, peristiwa onmouseup dicetuskan, dan apabila butang tetikus dilepaskan, acara onmouseup dicetuskan. Contohnya: 

<html>
<head>
  <script>
    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }
    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }
  </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>
</html>

Hasil yang sedang dijalankan kelihatan Apabila tetikus ditekan, "lepaskan tetikus anda" dipaparkan dan latar belakang menjadi biru selepas tetikus dilepaskan, "tekan di sini" dipaparkan dan latar belakang bertukar hijau.

0403.gif

Meneruskan pembelajaran
||
<html> <head> <script> function mDown(obj) // 按下鼠标 的 事件处理程序 { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="release your mouse" } function mUp(obj) // 松开鼠标 的 事件处理程序 { obj.style.backgroundColor="green"; obj.innerHTML="press here" } </script> </head> <body> <div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;" onmousedown="mDown(this)" onmouseup="mUp(this)" >press here</div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492357 permainan