Tulisan ini adalah bagian kedua dari tulisan tentang Tips Pemrograman AJAX. Semoga bermanfaat.

  1. Apa beda deklarasi object/variabel dengan menggunakan keyword var dan tanpa keyword var? Dengan var, maka anda akan mendapatkan object/variabel dengan scope lokal, misalnya jika anda lakukan deklarasi dalam sebuah function, maka object/variabel ini hanya dikenali dalam function tersebut. Sebaliknya jika anda melakukan deklarasi tanpa menggunakan keyword var, maka object/variabel tersebut akan memiliki scope global. Menggunakan object/variabel dengan scope global bisa berbahaya jika anda tidak berhati-hati apalagi tidak menyadari sedang menggunakan scope global.
  2. Javascript bukan bahasa yang line-based seperti visual basic. Artinya di Javascript anda dapat menulis satu statement dalam beberapa baris. Ini berguna jika anda menulis sebuah statement yang panjang (misalnya mendefiniskan sebuah string yang panjang). TETAPI, untuk yang satu ini anda tidak dapat menulis dalam beberapa baris:
    return "something";

    Jika anda menulis statement return dalam 2 baris seperti:

    return
    
      "something";

    Maka nilai yang dikembalikan adalah undefined. Ini berlaku baik di IE, Firefox, maupun Safari.

  3. Event object adalah sebuah object yang berisi informasi berguna tentang sebuah event yang sedang terjadi, misalnya, informasi tentang posisi mouse saat event terjadi, atau element apa yang meng-trigger event terjadi, dsb. IE, Firefox, dan Safari dan memiliki perbedaan dalam cara pengaksesan event object. Di IE, object event dapat diakses secara global melalui object window.event. Sedangkan di Forefox dan Safari, event object akan di-passing sebagai argumen pertama ketika event handler dipanggil oleh browser. Misalnya, anda memiliki kode html berikut:
    <div id="div1">ini div1</div>

    Kemudian anda meng-assign sebuah fungsi bernama test untuk meng-handle fungsi onclick pada element div1 tersebut

    document.getElementById("div1").onclick = test;

    Maka, untuk mendapatkan event object di dalam fungsi test, anda dapat menulis:

    function test(evt) {
      alert(evt); // untuk Firefox dan Safari, atau
      alert(window.event) // untuk IE
    }

    Untuk memudahkan pengaksesan event, anda dapat menggunakan fungsi sederhana berikut yang berlaku baik di IE, Firefox, maupun Safari

    function getEvent(evt) {
      return (evt) ? evt : ((window.event) ? event : null);
    }

    Sehingga fungsi test anda menjadi

    function test(evt) {
      alert(getEvent(evt)); // berlaku baik untuk IE, Firefox dan Safari
    }
  4. Cara mengakses element yang meng-trigger terjadinya sebuah event juga berbeda antara IE, Firefox, dan Safari. Di IE, anda dapat menggunakan properti srcElement. Sedangkan di Firefox anda dapat menggunakan properti target. Di Safari anda dapat menggunakan keduanya. Dengan menggunakan fungsi getEvent di atas, fungsi berikut dapat menyederhanakan pengaksesan terhadap element yang meng-trigger event:
    function getEventElement(e) {
      var evt = getEvent(e);
      return (evt.srcElement) ? evt.srcElement : evt.target;
    }

    Sehingga di dalam fungsi test yang meng-handle event seperti contoh sebelumnya, anda dapat mengakses element yang meng-trigger event sebagai berikut:

    function test(evt) {
      alert(getEventElement(evt)); // berlaku baik untuk IE, Firefox dan Safari
    }
  5. Masih tentang event object model. Perhatikan HTML berikut:
    <div id="div1">
      ini div1
      <div id="div1">ini div 2</div>
    </div>

    Jika anda meng-assign fungsi test seperti pada contoh sebelumnya untuk meng-handle event onclick pada div1, maka fungsi test masih akan dipanggil meskipun user meng-click div2, karena div2 adalah child dari div1 (efek bubbling). Jika di dalam fungsi test anda memanggil getEventElement seperti contoh sebelumnya, maka saat user meng-click div2, fungsi getEventElement tersebut akan mengembalikan div2 (bukan div1). Untuk mendapatkan element yang memang kita assign untuk event tersebut (div1), maka baik di IE, Firefox, maupun Safari anda dapat menggunakan this saat di dalam fungsi test (event handler). Selain itu khusus untuk Firefox dan Safari anda juga dapat menggunakan object event.currentTarget.

Bersambung…