[Tutorial] Mouse Click event di Javascript
|Shares :

[Tutorial] Mouse Click event di Javascript

Even handling di javascript sangat kompleks dan banyak. Dalam tutorial ini saya hanya akan menuliskan Contoh-contoh event Mouse click yang umum digunakan dalam penggunaan Javascript.

Apa itu Mouse Click event ?


Mouse Click event adalah sekumpulan perintah, kode, di javascript untuk meng-handle aksi ketika user meng-Click mouse nya. Event-Event ini sangat penting untuk memproses langsung aksi yang dilakukan User baik itu untuk proses 'Request' ke server atau proses langsung di Front-end ( biasanya di browser tanpa request ke Server).

berikut adalah Even-even Click di Javascript : 

  • Click - Action terjadi saat  User click Mouse nya ( satu kali klik-lepas).
  • DblClick - Action terjadi saat  User Double-click Mouse nya (dua kali klik-lepas).
  • MouseDown - Action terjadi saat User klik tombol tanpa melepas
  • MouseUp - Action terjadi saat User melepas Klick-tombol Mouse
  • MouseOut - Action terjadi saat pointer Mouse meninggal suatu area ( object )
  • MouseOver - Action terjadi saat pointer Mouse melintas/diaarahkan di suatu area ( object )
  • MouseMove - Action terjadi saat pointer Mouse melintas/diaarahkan dan di gerakkan di suatu area ( object )
  • ContextMenu - Action terjadi saat  User klik kanan Mouse
syntax untul action diatas ditulis dengan memberi awalan 'on'. Contoh 
onClick, on
MouseUp dsb.

Cobalah beberapa contoh berikut : 

<script type="text/javascript">
  function clickHandler () {
     alert ("Hello, World!");
  }
</script>
<span onClick="clickHandler();">Click Here</span>
<script>
function myFunction(elmnt,clr){
      elmnt.style.color=clr;
}
</script>

<p onMouseDown="myFunction(this,'red')" onMouseUp="myFunction(this,'green')">
       Klick di text ini, lihat apa yang terjadi
</p>


Silahkan coba beberapa Even yang lain.

Tags : #


SHARES :


Budy K's Avatar

Sains & Teknologi Enthusiast, Software Developer. Check my profile!
> 75% komen akan dibalas. Mohon sabar ya. Simpan halaman ini dan cek kembali lagi

Comments

* Email will not be published


    Privacy .ToS .Contact Us
    © 2017 Teknosains