Belajar Tentang Event yang Ada di Javascript

Beberapa hari yang lalu saya belajar tentang Document Object Model yang ada di Javascript lewat kelas online yang ada di Sekolah Koding. Didalam kelas tersebut, ada salah satu materi yang menurut saya menarik yaitu tentang Event pada Javascript. Saya rasa ini adalah salah satu dasar yang penting dalam belajar bahasa pemrograman Javascript. Saya akan coba bagikan yang saya pahami tentang materi ini.

Dengan Event ini, kita dapat mengkustomisasi sebuah atau beberapa elemen pada kondisi tertentu pada website. mau itu kondisi alaminya, ketika website sedang di-load, atau sedang di proses, atau misalnya kejadian lain seperti user melakukan klik, memposisikan kursor mouse pada element tertentu. Misalnya ketika user klik sebuah gambar, maka background gambarnya akan berubah warnanya atau malah gambarnya berubah. Dan Event ini ada lebih dari satu macam. Beberapa contohnya bisa dilihat disini. Dan ada 3 cara penulisan Event pada Javascript, dan berikut adalah caranya :

1. Menuliskan secara langsung pada bagian tag HTML nya

Contohnya adalah misal saya punya gambar yang saya akan saya tampilkan ke halaman web dengan memasukkan ke dalam tag img kemudian saya akan menambahkan Event ke tag img tersebut agar background pada gambar saya bisa berubah warnanya pada saat saya klik gambarnya.

Pertama, saya buat tag img nya lalu saya tambahkan sebuah Event yakni onclick dan kemudian beserta nama fungsinya yang akan digunakan untuk mengubah background gambar tersebut.

<img onclick = ”backgroundBerubah()” src=”gambar.png” width=600 id=”gambar” />

Kemudian saya ambil elemen gambar tadi menggunakan DOM Selector berdasarkan id pada tag img nya dan membuat sebuah fungsi untuk merubah warna background pada gambar di dalam tag script.

    Var img = document.getElementById(‘gambar’); //ini DOM Selectornya

    Function backgroundBerubah(){
        Img.style.backgroundColor = ‘red’;
    }

Nah ini yang terjadi ketika user klik pada gambarnya.

Cara Pertama

2. Menuliskan Event nya langsung pada tag script

Disini sebagai contohnya, saya akan membuat sebuah tag input yang nantinya ketika saya klik akan otomatis terisi dengan kalimat “Jangan Sentuh Aku!!”. Lucu ya? Hahaha, saatnya ngoding!

Pertama saya buat tag inputnya dibawah tag img yang saya buat tadi.

<input type=”text” id=”masukkan”>

Kemudian saya ambil element input tadi menggunakan DOM Selector berdasarkan id pada tag input nya.

    var input = document.getElementById('masukkan');

Selanjutnya saya akan menambahkan Event nya dengan menggunakan cara penulisan yang kedua beserta dengan fungsinya.

    input.onclick = function(){
        input.value = 'Jangan Sentuh Aku!!';
    }

Saya save dan kemudian buka browser saya. Maka nanti hasilnya akan seperti ini.

Cara Kedua

3. Dengan menggunakan metode AddEventListener()

Metode ini letaknya sama dengan metode yang kedua yaitu di dalam tag script dan tentu saja sebelum itu saya harus mengambil elemen teksnya menggunakan DOM Selector berdasarkan id-nya. Disini saya akan membuat sebuah teks yang nanti nilainya akan berubah ketika kursor mouse berada di atasnya atau menjauhinya. Langsung ngoding aja deh!

Pertama saya buat tag paragraph nya dibawah tag input yang saya buat tadi.

<p style="font-weight: bold;" id="teks">Sini Mendekat ke aku</p>

Kemudian langsung saya tambahkan untuk Event beserta fungsinya menggunakan cara penulisan ketiga.

    text.addEventListener('mouseenter', function(){
        text.innerHTML = 'Nah gitu dong deket!';
        })

    text.addEventListener('mouseleave', function(){
        text.innerHTML = 'Eh jangan jauh-jauh!';
        })

Kali ini saya tambahkan 2 Event. Yaitu ketika kursor mouse berada di dekat teks (mouseenter) dan ketika meninggalkan teks (mouseleave), Maka nilai didalam teks tersebut pun akan berubah. Maka hasilnya akan terlihat seperti yang ada di bawah ini.

Cara Ketiga

Nah itu tadi sedikit tentang Event pada Javascript. Dengan menggunakan Event, maka website akan terlihat lebih interaktif lagi (dengan dukungan kreatifitas sang pembuat tentunya).