Rabu, 22 Februari 2017

Browser Event

Browser Event
                Untuk dapat menghasilkan dokumen HTML yang menarik, modifikasi elemen-elemen dalam dokumen saja tentu tidak cukup. Terkadang kita memerlukan dokumen yang interaktif; yang memberikan respon terhadap masukan dari pengguna. Terdapat banyak jenis masukan dari pengguna yang dapat diakses oleh browser. Penekanan tombol keyboard adalah masukan. Klik tombol mouse juga adalah masukan. Bahkan pergerakan mouse juga dapat dihitung sebagai masukan. Berbagai masukan dari pengguna ini dibaca dan dipantau oleh browser agar kita dapat mengambil tindakan ketika pengguna memberikan masukan. Karena masukan dianggap sebagai sesuatu yang dilakukan pengguna, atau dengan kata lain kejadian ketika dokumen HTML ditampilkan, maka hasil rekaman peristiwa ini dikenal dengan nama event.
                Cara kerja dari browser event sendiri sangat sederhana. Browser memberikan kita fasilitas untuk memantau kejadian tertentu pada elemen DOM tertentu. Kita kemudian dapat memberikan sebuah fungsi kepada browser, yang nantinya dipanggil ketika peristiwa yang dipantau terjadi. Untuk beberapa peristiwa, misalnya penekanan tombol keyboard seringkali kita akan memerlukan informasi tambahan seperti tombol apa yang ditekan pengguna. Untuk mengakomodasi hal ini browser memberikan objek khusus untuk event yang dapat kita akses melalui fungsi yang kita berikan ke pemantau kejadian.
                Perlu diketahui juga bahwa event dijalankan dari elemen yang paling dalam dari DOM, dan kemudian bergerak naik terus sampai ke elemen paling atas dari DOM (body). Misalkan kita memiliki elemen seperti berikut:
1
2
3
4
5
6
<p>Sebuah paragraf dengan list di dalamnya.
   <ul>
       <li>List pertama</li>
       <li><a href="http://google.com">List kedua</a></li>
    </ul>
</p>
                Jika pengguna melakukan klik pada teks “List kedua” pada elemen HTML di atas, maka browser terlebih dahulu akan menjalankan event yang ada pada elemen a. Jika kita tidak memantau elemen tersebut, maka browser akan mengecekevent pada elemen li, dan seterusnya sampai kepada elemen p dan akhirnya elemen teratas, body. Jika pada elemenbody juga tidak terdapat event yang dipantau, maka browser akan menjalankan fungsi standar browser. Dalam contoh di atas, browser akan bergerak ke alamat http://google.com. Pola pergerakan event seperti ini kita kenal dengan namaevent bubbilg atau bubbing phrase.
                Seperti yang dapat dilihat sejauh ini, event dalam DOM cukup sederhana dan mudah. Pada dasarnya, untuk menambahkan interaktifitas dalam dokumen HTML kita cukup melakukan dua langkah saja:
  1. Buat fungsi yang ingin dipanggil ketika event terjadi.
  2. Kaitkan elemen DOM dengan event yang diinginkan, beserta dengan fungsi yang dibuat pada langkah pertama.
Secara umum, browser menyediakan lima fasilitas khusus berkaitan dengan event, yaitu fasilitas untuk:
  1. Mendaftarkan pemantau event.
  2. Mengambil objek event.
  3. Mengambil informasi dari objek event.
  4. Memberikan informasi ke browser bahwa event telah selesai ditangani.
  5. Menghapus (melepaskan) pemantau event.
Kelima fasilitas yang ada ini sangat mudah digunakan, walaupun sayangnya beberapa browser mengimplementasikan semuanya dengan cara yang berbeda-beda. Seperti biasa, pembahasan akan kita lakukan hanya untuk browser berbasis Webkit dan Gecko.
Pemantauan Event
                Untuk melihat bagaimana kita dapat memantau event pada sebuah elemen DOM, kita akan bekerja dengan sebuah dokumen sederhana yang memiliki tulisan dan tombol, seperti berikut:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Event dalam Browser</title>
    </head>
    <body>
        <h1 id="judul">Judul Bab Dokumen</h1>
        <p>
        <a href="http://www.google.com" id="link">
            Link ke Google
        </a>
    </p>

        <input type="button"
           id="btnJudul"
           value="Ganti Warna Judul Bab">

        <input type="button"
           id="btnLink"
           value="Ganti Warna Link">

        <script type="text/javascript" src="script.js"></script>
    </body>
    </html>
Untuk mengaitkan pemantau event ke salah satu elemen, kita dapat memanggil method addEventListener milik elemen tersebut. addEventListener merupakan method milik objek yang mengimplementasikan antarmuka EventTarget.EventTarget sendiri diimplementasikan oleh seluruh elemen HTML dan beberapa objek khusus lainnya (misal:XMLHttpRequest). addEventListener menerima tiga buah argumen, yaitu:
  1. Argumen pertama merupakan string yang berisi teks dari nama event yang ingin dipantau.
  2. Argumen kedua menerima objek, atau tepatnya fungsi, yang ingin dijalankan ketika event terjadi.
  3. Argumen ketiga yaitu sebuah nilai boolean yang menandakan apakah bubbling phrase harus dijalankan dengan normal (dari dalam ke luar) atau sebaliknya (dari luar ke dalam). Nilai false berarti bubbling phrase berjalan normal, sementara true berarti bubbling phrase berjalan terbalik. Argumen ketiga ini bersifat opsional (tidak harus diisikan). Jika tidak diisikan bubbling phrase akan berjalan normal (nilai false).
Pada umumnya kita hanya akan menggunakan parameter pertama dan kedua, karena masih banyak browser yang tidak mengimplementasikan argumen ketiga. Langsung saja, misalkan jika kita ingin melakukan sesuatu ketika tombol “Ganti Warna Judul Bab” di-klik:
1
2
3
4
5
6
7
var tombol = document.getElementById("btnJudul");
var fungsi = function () {
    var jdl = document.getElementById("judul");
    jdl.style.color = "#5FF";
};

tombol.addEventListener("click", fungsi);
Kode di atas cukup jelas dan sederhana: ambil elemen yang tepat (tombol) dan kemudian kaitkan event klik ke fungsidengan addEventListener. Setelah menjalankan kode di atas, elemen h1 dengan id judulBab akan berubah warnanya ketika kita menekan tombol “Ganti Warna Judul Bab”.
Untuk menghilangkan atau membuang pemantau event sendiri dapat dilakukan dengan mudah, memanfaatkan fungsiremoveEventListener milik elemen yang bersangkutan. Fungsi ini memiliki parameter yang sama persis denganaddEventListener.
1
tombol.removeEventListener("click", fungsi);
Perhatikan juga bagaimana kita tetap mengirimkan fungsi ke removeEventListener. Hal ini berarti kita harus memiliki akses terhadap fungsi dan tombol ketika memanggil removeEventListener.
Objek Event
Objek Event merupakan sebuah objek yang dibuat ketika sebuah event berjalan. Objek Event dapat kita akses melalui fungsi yang kita kirimkan ke addEventListener:
1
2
3
4
5
6
var aksesEvent = function (evt) {
    // parameter evt merupakan objek Event
};

// fungsi aksesEvent akan dapat mengakses objek event
tombol.addEventListener("click", fungsi);
Pada kode di atas, kita hanya cukup menambahkan sebuah parameter ke dalam fungsi yang akan dikirimkan untuk dapat mengakses Event. Melalui objek ini kita dapat mengakses berbagai informasi mengenai event yang sedang berjalan. Misalnya, kita bisa mendapatkan elemen yang sedang berinteraksi dengan pengguna melalui properti target:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var link = document.getElementById("link");
    var fungsiLink = function (event) {
            // karena pengguna melakukan klik terhadap
            // elemen dengan id link, maka kita bisa
            // mengambil elemen tersebut melalui Event.target
        var el = event.target;

        el.style.color = "#F43";
        el.style.textDecoration = "none";
    };

    // ketika di-klik, link akan berubah warna dan
    // tidak lagi bergaris bawah
    link.addEventListener("click", fungsiLink);
Sayangnya ketika kode penanganan event di atas berjalan kita tidak akan dapat melihat perubahan warna dan tampilan teks karena secara otomatis browser akan berpindah halaman ke Google. Untuk menangani hal ini, kita bisa memanggilmethod preventDefault yang berguna untuk membatalkan aksi standar (default) dari elemen DOM:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var link = document.getElementById("link");
    var fungsiLink = function (event) {
        var el = event.target;
        el.style.color = "#F43";
        el.style.textDecoration = "none";

        // memaksa elemen link tidak membuat
        // browser berpindah ke halaman lain
        event.preventDefault();
    };

    link.addEventListener("click", fungsiLink);
Sekarang kita bisa melihat bagaimana objek Event memiliki properti dan method yang sangat berguna, beserta cara menggunakan fitur-fitur tersebut. Keseluruhan method dan properti yang dimiliki objek Event tidak akan kita bahas di sini. Silahkan baca dokumentasi objek Event pada website yang relevan jika ingin melihat informasi apa saja yang disediakan oleh Event.
Membuat Event Sendiri
Jika memang diperlukan, kita juga dapat membuat event milik kita sendiri. Objek CustomEvent digunakan untuk membuatevent yang kita inginkan. CustomEvent dapat dibuat dengan memanggil constructor objek, seperti berikut:
1
2
3
4
5
var eventBuatan = new CustomEvent("eventBuatan", {
        detail: { name: "Event Buatan" },
        bubbles: true,
        cancelable: true
    });
Seperti yang dapat dilihat dari kode di atas, CustomEvent menerima dua buah parameter untuk constructor-nya, yaitu:
  1. Nama event yang kita inginkan, dalam contoh ini eventBuatan.
  2. Data yang ingin kita berikan kepada event buatan.
Terdapat tiga data utama yang dapat kita berikan, yaitu:
  1. bubbles, nilai boolean yang menentukan apakah event akan menjalankan bubble phrase atau tidak.
  2. cancelable, nilai boolean untuk memberikan fitur pembatalan event melalui method preventDefault danstopPropagation milik objek Event.
  3. detail, yang merupakan sebuah objek berisi data apapun yang ingin kita berikan kepada event.
Untuk menggunakan event buatan, kita dapat mengaitkan event tersebut kepada sebuah elemen DOM, seperti layaknyaevent bawaan dari browser:
1
2
3
link.addEventListener("eventBuatan", function (event) {
    // lakukan sesuatu ketika eventBuatan terjadi
});
Sayangnya, berbeda dengan event bawaan browser, event buatan kita tidak akan dapat berjalan secara otomatis ketika pengguna melakukan sesuatu dalam dokumen. Untuk event buatan, kita harus memanggil method dispatchEvent ketika ingin menjalankan event tersebut. dispatchEvent sendiri merupakan method milik elemen DOM, sehingga penggunaannya memerlukan keberadaan elemen DOM yang bersangkutan:
1
link.dispatchEvent(eventBuatan);
Karena keterbatasan inilah maka dalam penggunaan di aplikasi biasanya kita menggabungkan event buatan dengan interaksi antar satu objek dengan objek lain, bukan interaksi antara pengguna dengan dokumen HTML.
Keindahan Model Event Browser
Model event yang disediakan oleh DOM sangat sederhana. Tidak hanya sederhana, model yang diberikan oleh DOM juga sangat berguna. Dengan menggunakan model event milik DOM, kita mendapatkan akses terhadap aksi pengguna dari berbagai perangkat, mulai dari PC sampai dengan smartphone! Event memungkinkan kita untuk mengakses apa yang terjadi, kapan sebuah event terjadi, dan kemudian menentukan respon kita terhadap event tersebut dengan sangat mudah. Bagaimana browser mengimplementasikan event tidak terlalu penting - kita dapat dengan tenang mengahlikan fokus kita ke pengembangan aplikasi web yang baik.
Abstraksi yang disediakan oleh event seperti ini sangat patut ditiru. Jika mampu membangun aplikasi dengan mengimplementasikan konsep-konsep yang ada dalam event, kita akan mendapatkan kode aplikasi yang sangat rapi dan mudah dirawat. Framework modern Javascript seperti Backbone.js dan AngularJS banyak menggunakan konsep-konsep sejenis. Jika tertarik dengan konsep yang digunakan oleh model event seperti ini, silahkan baca lebih lanjut mengenai pola pengembangan (design pattern) Observer.


Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)