Bila kita melihat referensi mengenai addEventListener ini, kita mengetahui bahwa metode tersebut tidak didukung oleh IE dibawah IE 9. Hal yang sama juga dapat kita lihat untuk metode removeEventListener. Metode tersebut tidak didukung oleh IE dibawah IE 9.
Untuk membuat metode pengendalian event yang mendukung browser tua, kita dapat menggunakan metode semacam onclick untuk event click, onkeypress untuk event keypress dan sebagainya.
Bagaimana bila kita ingin berhenti mendengarkan event dari suatu element tertentu? Kita tinggal memberikan nilai null:
Ada yang perlu diperhatikan dari contoh di atas. Di dalam metode areaMenulis.onkeyup, kita dapat melihat bahwa objek this mengarah kepada element dimana event berlangsung. Dalam contoh di atas, element tersebut adalah element areaMenulis.
Metode semacam onclick seperti yang telah diterangkan di atas, dikenal sebagai pola property event handler. Pola tersebut juga dikenal sebagai DOM Level 0 Event Handler.
Pola Property Event Handler di atas dapat berjalan pada semua browser.
Bila pengendalian event ala property event handler di atas dapat berjalan disemua browser, maka mengapa ada metode seperti addEventListener dan removeEventListener? Ada kekurangan dari pengendalian event ala property event handler di atas.
Kekurangannya adalah tiap event pada suatu element hanya dapat memiliki satu event handler. Misalnya, kita ambil contoh areaMenulis di atas. Kita ingin menambahkan event listener baru untuk event click. Bila kita melakukan hal tersebut, event listener yang lama akan tergantikan oleh event listener yang baru.
Mari kita lihat contoh berikut ini:
Bagaimana cara kita mengatasi kekurangan di atas?
Untuk dapat membuat event handler yang dapat berjalan di browser lama, kita perlu mempertimbangkan beberapa hal.
Pertama, kita perlu memeriksa terlebih dahulu apakah browser memiliki metode addEventListener atau tidak. Bila tidak, kita akan menggunakan pengendalian event ala property event handler di atas.
Kedua, bila kita menggunakan property event handler, maka kita perlu membuat mekanisme tersendiri agar suatu element dapat memiliki lebih dari satu event handler untuk suatu event.
Metode yang akan kita buat terinspirasi dari JQuery. Mari kita lihat beberapa contoh pengendalian event di JQuery:
Agar pembahasan kita tidak terlalu melebar, maka kita batasi saja pencarian element menggunakan getElementById.
Jadi pertama, mari kita buat objek utama untuk contoh ini, Ev:
// objek event handler kita
function Ev() {
};
Ok, masih kosong. Mari kita tambahkan metode untuk mendengarkan event:
function Ev(el) {
this.el = el;
}
Ev.prototype.on = function (type, listener) {
// memeriksa apakah addEventListener dapat kita gunakan
if (this.el.addEventListener) {
this.el.addEventListener(type, listener, false);
} else {
// untuk browser yang tidak mendukung addEventListner
this.el["on" + type] = listener;
}
};
Ev.prototype.off = function (type, listener) {
if (this.el.removeEventListener) {
this.el.removeEventListener(type, listener);
} else {
this.el["on" + type] = null;
}
};
Objek Ev akan menangani pengendalian event khusus untuk suatu element tertentu. Untuk memanfaatkan objek Ev, kita buat metode berikut:
function initListen() {
// memantau element apa saja yang sudah pernah kita terima
var elInstances = {}
// closure
return function( id ) {
// kita membatasi pada pencarian ID saja
var el = document.getElementById(id);
// memeriksa apakah kita pernah menerima element ini sebelumnya apa
// belum.
//
// BIla sudah, maka kita tidak perlu membuat instanta
// dari Ev.
//
// Bila belum, maka kita akan mebuatkannya, kemudian menyimpan
// referensi terhadapnya di elInstances
if (elInstances[id]) {
return elInstances[id];
} else {
var ev = new Ev(el);
elInstances[id] = ev;
return ev;
}
}
}
Inti dari metode initListen di atas adalah, dia akan memberikan kepada kita metode untuk menjembatani antara sebuah element yang hendak kita pantau dengan event miliknya yang hendak kita dengarkan.
Untuk lebih memahaminya, mari kita lihat contoh penggunaannya:
Ok, apakah sudah selesai?
Belum. Kita masih belum mengatasi masalah kedua. Yaitu bagaimana caranya agar kita bisa memasang lebih dari satu event handler untuk suatu event pada suatu element tertentu.
Mekansime yang akan kita gunakan, menerapkan sebuah properti khusus yang akan kita beri nama handler. Tugas dari handler adalah menyimpan daftar listener untuk element-element yang didengarkannya. Jadi, kita ambil contoh element #areaMenulis:
var Ev = {
el: /* hasil dari document.getElementById("areaMenulis") */,
handler: {
mousemove: [
function(){ /* event handler pertama */}.
function(){ /* event handler kedua */},
function(){ /* event handler ketiga */}
],
click: [
function(){ /* event handler pertama */}.
function(){ /* event handler kedua */},
function(){ /* event handler ketiga */}
]
}
}
Jadi, bila pada #areaMenulis event click dibangkitkan, maka seluruh event listener yang disimpan di dalam handler.click akan dijalankan. Tentunya ini hanya untuk browser yang tidak mendukung metode addEventListener.
Implementasinya adalah seperti yang ada pada demo di bawah ini. Sebisa mungkin kami sertakan penjelasan mengenai kode yang telah kami buat.
Oh ya, bagi Anda yang tidak memiliki akses terhadap browser tua, Anda dapat mengganti metode on dan off menjadi:
Ev.prototype.on = function (type, listener) {
this.processOn(type, listener);
};
// Berhenti mendengarkan event type
// untuk event listener listener
Ev.prototype.off = function (type, listener) {
this.processOff(type, listener);
};
Tujuannya adalah untuk memeriksa bahwa metode di atas bekerja.
Jangan. Jangan gunakan metode di atas. Anda akan lebih aman menggunakan metode pengendalian event yang disediakan oleh JQuery.
Kode di atas hanyalah hasil dari eksperimen kami. Sudah tentu, kodenya belum teruji sebagaiaman JQuery sudah teruji. Kami belum menguji performanya, kestabilannya, dan lain-lain. Artikel ini akan kami perbaharui terus bila kami menemukan pendekatan yang lebih efektif dan stabil.
Tetapi kami berharap, artikel kami ini dapat memberi gambaran mengenai beberapa cara untuk mengatasi kompatibilitas API antar browser.
Bila Anda menemukan kesalahan, bug, atau merasa bahwa artikelnya menyesatkan, kami berharap Anda mau menuliskan tanggapan Anda pada bagian komentar di bawah ini.
Selamat hacking. Semoga bermanfaat.