Event Handling dalam Javascript ~ Pemrograman dan Teknologi

Event handling adalah penanganan keadaan dari browser atau input yang dimasukkan oleh pengguna. Kita bisa mendapatkan tombol keyboard atau mouse yang ditekan atau perubahan pada browser dan isinya.

Btw, Script bisa diletakkan di dalam Head ataupun Body. Untuk kali ini saya akan meletakkannya di dalam Head karena penggunaan document dan perubahan dalam Body mungkin akan "menghapus" script yang letaknya dalam body sehingga script tidak bisa digunakan dengan sebagai mana mestinya.

Untuk halaman secara keseluruhan, event bisa kita dapatkan dari properti objek document atau window. Event yang terkait dengan satu element tertentu bisa kita dapatkan dari objek yang kita dapatkan dengan getElementById, getElementsByTagName atau method-method sejenis.

<HTML>
<HEAD>
     <TITLE>Belajar HTML</TITLE> 
     <Script>
         document.onclick=function(e){
             alert("coba klik ini");
         }
     </Script>
</HEAD>
<BODY>
    <H1>Coba klik di mana saja di halaman ini</H1>
</BODY>
</HTML>

Pada contoh di atas, kita menggunakan event onclick dari objek window yang akan memicu pemanggilan function saat halaman diklik. onclick bisa diterapkan hampir di semua element HTML. "e" adalah parameter yang menerima properti terkait event onclick. Berikut ini adalah cara penggunaan parameter yang disertakan dalam suatu event.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <Script>
        document.onmousedown=function(a){
            alert("x : " + a.x + ";\ny : " + a.y);
        }
    </Script>
</HEAD>
<BODY>
    <H1>Coba klik di mana saja di halaman ini</H1>
</BODY>
</HTML>

Beberapa event umum terkait penggunaan mouse yang bisa kita gunakan yaitu :

onclick
onmouseup
onmousedown
onmouseover
onmouseout
onmousemove
ondblclick

Contoh penggunaan onmouseup untuk objek document :

<HTML>
 <HEAD>
     <TITLE>Belajar HTML</TITLE>
     <Script>
         document.onmouseup=function(e){
             alert("mouse dilepas");
         }
     </Script>
</HEAD>
<BODY>
    <H1>Coba klik di mana saja di halaman ini</H1>
</BODY>
</HTML>

Event onmouseup bisa diganti dengan event.event lain yang saya sebutkan di atas.

Selain event terkait penggunaan mouse, ada juga event yang terkait dengan penekanan tombol keyboard di komputer. Tapi, event-event terkait keyboard itu mungkin tidak berlaku untuk ponsel layar sentuh.
onkeyup
onkeydown
onkeypress

Btw, untuk objek dan document window, ada saatnya hanya ada satu event yang bisa digunakan di dalam satu kode HTML jika script diletakkan di dalam Body, karena itu saya sejak tadi meletakkan function di dalam head. Hal itu mungkin juga berlaku untuk event-event yang terkait dengan lain. Tapi, untungnya, objek lain bisa menerima lebih dari satu event untuk input dari perangkat yang sama.

Beberapa hal yang perlu diingat terkait event handling adalah, semua properti untuk event diawali dengan "on", dan semua event butuh function yang akan digunakan sebagai "event handler" untuk menangani event yang ada.

Selain dengan menggunakan properti dari suatu objek, kita juga bisa menggunakan addEventListener. addEvent listener minimal memiliki 2 parameter. Parameter pertama adalah jenis event, dan parameter kedua adalah function atau object yang bisa digunakan untuk "callback" saat event dipicu oleh input dari user. Sebenarnya ada beberapa parameter tambahan, tapi untuk sementara ini abaikan saja dulu dan cukup fokus ke dua parameter utama dari function addEventListener. Pada method addEventListener, kita tidak menggunakan kata "on". Misalnya, onmousedown cukup ditulis sebagai "mousedown". Lebih jelasnya, perhatikan contoh di bawah ini!

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <Script>
        window.addEventListener("mouseup", function(e){
            alert("mouse ditekan");
        });
        window.addEventListener("keyup", function(e){
            alert("keyboard dilepas");
        });
    </Script>
</HEAD>
<BODY>
    <H1>Coba klik di mana saja di halaman ini!</H1>    
</BODY>
</HTML>

Event handler bisa disediakan dalam bentuk atribut suatu elemen atau juga sebagai properti dari suatu objek yang mewakili elemen HTML. Jika script berada dalam head, getElementById dan sejenisnya harus diletakkan di dalam function. Saat semua "bagian di luar function" dari script yang berada di head dieksekusi, semua element dalam body belum punya objek yang mewakilinya karena dukument belum dimuat sepenuhnya. Tapi, jika function dipanggil karena suatu event yang memicunya, tidak akan ada masalah terkait dengan penggunaan getElementById, getElementsByTagName, getElementsByClassName dan semacamnya karena dokumen HTML sudah dimuat secara utuh.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <Script>
        document.onmousedown=function(e){
            let par=document.getElementById("paragraf");
            par.innerHTML="mouse ditekan";
        }
        document.onmouseup=function(e){
            alert("mouse dilepas");
        }
    </Script>
</HEAD>
<BODY>
    <a href="#" onmousedown="ditekan()" onmouseup="dilepas()">Coba klik  ini!</a>
    <p id="paragraf"></p>
</BODY>
</HTML>

Selain event untuk mouse, ada juga beberapa event yang hanya berlaku untuk windows, objek dan element tertentu. Misal :

onload
onfocus
onblur
onchange
oninput
onresize
onunload

Event lain terkait element tertentu mungkin bisa dicari di sumber lain, atau mungkin nanti akan ada di tulisan saya yang lain.