Cara menggunakan semua jenis acara javascript

Question

Acara adalah salah satu nama tindakan yang dapat digunakan untuk memicu proses logis dalam JavaScript. Acara ini biasanya dibangun ke dalam browser dan ada juga yang ditanam secara manual. Acara yang paling sering digunakan adalah acara onclick. Acara onclick akan terjadi atau dijalankan ketika elemen HTML diklik. Demikian pula, acara lainnya semuanya memiliki proses, kondisi, dan kriteria untuk menjalankan JavaScript

Table of Contents Show

Daftar Acara yang biasanya tersedia dalam javascript
Penggunaan acara
Instal acara di Elemen
Fase Penangkapan
Fase Sasaran
Fase Gelembung
Peristiwa Objek
Hapus Penangan Acara
stopPropagation & stopImmediatePropagation
preventDefault
Konteks Pada Pendengar
Hasilkan Acara Menggunakan Javascript
Delegasi Acara
Penanganan Acara hanya untuk penanganan
Peristiwa apa yang sering digunakan dalam JavaScript jelaskan?
Apa itu acara Situs web dalam JavaScript?
2 Apa nama peristiwa yang terjadi saat pengguna mengeklik elemen HTML?
Bagaimana cara memanggil fungsi dalam JavaScript?

Daftar Acara yang biasanya tersedia dalam javascript

Berikut ini adalah daftar event yang umum atau tersedia dalam javascript

Nama Peristiwa Deskripsi nonclickEvent yang paling sering digunakan. Event ini sudah ada di /anchor ketika anda buka linkonchangeEvent on change akan terjadi jika ada perubahan pada suatu elemen, bisa merubah nilai, bentuk, atau isi dari elemen tersebut. onmouseoverElement yang akan diproses jika mouse digerakkan ke elemen tertentu. onmouseoutEvent yang akan terjadi saat pointer mouse keluar dari elemen tertentu onkeydownEvent yang terjadi saat keyboard ditekan iconloadEvent yang terjadi saat browser selesai memanggil semua elemen DOM

Penggunaan acara

Penggunaan acara tergantung pada kebutuhan pengguna. Jika kita ingin menggunakan tombol untuk mengganti teks tertentu, maka kita cukup menambahkan event onclick ke elemen tombol. Itu sama dengan acara lainnya. Ada beberapa kejadian yang biasanya dipicu oleh kejadian tertentu. Seperti event sebelum klik atau event sebelum diklik, event setelah klik atau event setelah diklik dan masih banyak lagi lainnya

Instal acara di Elemen

Bagaimana cara menanam / memasang acara di elemen tertentu? . Namun jika kita menggunakan framework tertentu maka kita bisa menanamnya dengan mudah. Pada percobaan kali ini kita akan menggunakan jQuery sebagai framework JavaScript

Instal Acara onclick menggunakan jQuery

Untuk menginstall event onlick menggunakan jquery cukup mudah dilakukan. Hal pertama yang harus dilakukan adalah memanggil jQuery ke dalam HTML. Kemudian buat skrip sebaris untuk menjalankannya. Berikut ini adalah contohnya

$("#nama_id_element").on("click",function(e){
e.preventDefault();
alert("Saya diklik");
});

Dari contoh kode, kita akan menanamkan event onclick pada elemen DOM dengan ID=”name_id_element”. Jadi jika Anda membuat HTML yang sudah memiliki ID yang sama, maka ketika ID tersebut diklik maka akan muncul peringatan

Menghapus instalan acara onclick menggunakan jQuery

Sama seperti menanam sebuah event, menghilangkan sebuah event juga sangat mudah jika dilakukan dengan menggunakan javascript. Berikut ini adalah contoh kodenya

$("#nama_id_element").off("click");

_

Jika kita sudah memasang event onclick pada elemen dengan ID=”name_id_element”, maka sekarang sudah tidak bisa diklik lagi

Acara adalah salah satu bagian terpenting dari aplikasi web. Setiap elemen di halaman situs web dapat memicu suatu peristiwa. Tapi apa pentingnya kemampuan?

Event biasanya dimunculkan ketika sebuah elemen telah mengalami perubahan kondisi. Misalnya kita ingin memperbesar gambar yang ditekan oleh pengguna

Bagaimana kita tahu bahwa gambar telah diklik oleh pengguna?

Tentu masih banyak event lain yang bisa dimunculkan oleh elemen tertentu di halaman website. Misalnya, ada suatu peristiwa yang menunjukkan bahwa suatu unsur telah mengalami perubahan ukuran. Ada peristiwa yang menunjukkan bahwa suatu elemen sedang dipindahkan oleh pengguna. Ada juga event yang menandakan bahwa mouse yang digunakan user sedang bergerak

Jadi, apa itu acara?

Cara kerja

Mari kita ambil kasus di mana pengguna menekan sebuah tombol. Ketika sebuah tombol ditekan, beberapa hal terjadi. Memahami event ini dapat membantu kita untuk merespon dengan benar ketika sebuah event dimunculkan

Mari kita asumsikan kode html kita adalah sebagai berikut

<html>
    <head>
        <meta charset="UTF-8">
        <title>Event</title>
    </head>
    <body>
        <div>
            <button>Tekan Saya</button>
        </div>
    </body>
<html>

Apa yang terjadi ketika tombol

target.addEventListener(tipeEvent, listener [, useCapture]);

1 ditekan dapat dilihat pada gambar di bawah ini

Gambar acara

Fase Penangkapan

Saat tombol di atas ditekan, javascript tidak langsung memunculkan event

target.addEventListener(tipeEvent, listener [, useCapture]);

0 pada tombol. Jika tidak, javascript memunculkan acara

target.addEventListener(tipeEvent, listener [, useCapture]);

0 secara berurutan berdasarkan struktur DOM. Mulai dari objek DOM tertinggi lalu turun hingga mencapai tombol yang sebenarnya ditekan tadi

Jadi, javascript memunculkan acara

target.addEventListener(tipeEvent, listener [, useCapture]);

0 untuk pertama kalinya pada

target.addEventListener(tipeEvent, listener [, useCapture]);

5. Kemudian, acara

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 dimunculkan pada

target.addEventListener(tipeEvent, listener [, useCapture]);

7, setelah itu

target.addEventListener(tipeEvent, listener [, useCapture]);

8, dan selanjutnya ke elemen

target.addEventListener(tipeEvent, listener [, useCapture]);

9 yang berada di atas elemen

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0. Dan peristiwa ini disebut Fase Penangkapan

Nah, event

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 ini bisa kita dengarkan saat masih dalam tahap capture. DEMO

JS Bin

Jadi, kami menggunakan metode yang disebut

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_2 pada elemen untuk mendengarkan acara dari elemen itu

target.addEventListener(tipeEvent, listener [, useCapture]);

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

3. adalah elemen yang memunculkan peristiwa tersebut

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

4. adalah event yang dimunculkan (pada contoh diatas, Event typenya adalah "klik")

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5. metode yang akan dilakukan saat event

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

4 dimunculkan pada

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

3

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

8. ketika nilainya

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_9, maka

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 akan dijalankan pada fase Capture

Jika kita tidak mengisi nilai untuk

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

8, maka nilai defaultnya adalah

var tombol = document.getElementsByTagName("button")[0];

tombol.addEventListener("click", function( e ) {

}, false);

2. Ketika

var tombol = document.getElementsByTagName("button")[0];

tombol.addEventListener("click", function( e ) {

}, false);

_2, maka

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 akan dilakukan pada fase Bubbling. Kami akan membahas fase menggelegak di bagian selanjutnya

Fase Sasaran

Berdasarkan contoh di atas, fase penangkapan hanya berjalan sampai elemen

target.addEventListener(tipeEvent, listener [, useCapture]);

9 yang berada tepat di atas elemen

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0. Saat peristiwa

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 dimunculkan pada elemen

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0, fase telah berubah menjadi Fase Target. Ini berarti bahwa acara tersebut telah ditempatkan tepat pada elemen yang mengalami interaksi (dalam contoh kita, elemen yang ditekan oleh pengguna)

Namun, pada kenyataannya, banyak browser menerapkan fase penangkapan ke elemen target (dalam elemen contoh kami

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0).

Target Phase Demo

Fase Gelembung

Setelah event

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 dimunculkan pada elemen

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0, javascript memulai fase baru yaitu Fase Bubbling. Fase ini dimulai dari elemen di atasnya

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_0, yaitu

target.addEventListener(tipeEvent, listener [, useCapture]);

9, hingga elemen teratas

Jadi, fase Bubbling adalah kebalikan dari fase Capture. Tapi bagaimana dengan sintaks untuk mendengarkan acara di fase Bubbling ini?

Secara sintaksis, perbedaan fase Bubbling hanya pada parameter

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

8 yang bernilai

var tombol = document.getElementsByTagName("button")[0];

tombol.addEventListener("click", function( e ) {

}, false);

2

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

Peristiwa Objek

Setiap

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 dipasang pada suatu acara, akan mendapatkan

var tombol = document.getElementsByTagName("button")[0];

function callback() {
    console.log("#tombol ditekan");
}

// memasang event handler
tombol.addEventListener("click", callback, false);

// melepas event handler
tombol.removeEventListener("click", callback, false);

7.

var tombol = document.getElementsByTagName("button")[0];

function callback() {
    console.log("#tombol ditekan");
}

// memasang event handler
tombol.addEventListener("click", callback, false);

// melepas event handler
tombol.removeEventListener("click", callback, false);

7 memiliki properti menarik yang dapat kita gunakan untuk menanggapi suatu peristiwa

Mari kita ambil contoh menghasilkan acara

target.addEventListener(tipeEvent, listener [, useCapture]);

0 di atas

var tombol = document.getElementsByTagName("button")[0];

tombol.addEventListener("click", function( e ) {

}, false);

Parameter

button.addEventListener("click", function() {
    orang.getName();
});

0 diterima oleh

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 di atas memiliki properti berikut

button.addEventListener("click", function() {
    orang.getName();
});

_2 (Tali). jenis acara yang diangkat

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

3 (Simpul). Node DOM tempat kejadian berasal (dalam contoh kami di atas adalah

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0)

```
button.addEventListener("click", function() {
    orang.getName();
});    
```
_5 (Simpul). DOM Node tempat event sedang dimunculkan (silakan lihat kembali 3 fase di atas)

button.addEventListener("click", function() {
    orang.getName();
});

6 (Boolean). apakah kita saat ini sedang dalam fase menggelegak?

button.addEventListener("click", function() {
    orang.getName();
});

_7 (Fungsi). kami dapat memanfaatkan properti ini untuk membatalkan respons default dari pengguna saat

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

3 mengalami peristiwa

button.addEventListener("click", function() {
    orang.getName();
});

2. Misalnya, ketika

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

0 ditekan oleh pengguna, respons default adalah membuka tautan. Tetapi kita dapat membatalkan respons dengan menggunakan properti

button.addEventListener("click", function() {
    orang.getName();
});

7 ini

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

2 (Fungsi). Hentikan fase saat ini

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

3 (Fungsi). Hampir sama dengan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

2 di atas. Kita akan membahas perbedaannya nanti

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

5 (Boolean). menentukan apakah

button.addEventListener("click", function() {
    orang.getName();
});

_7 dapat dilaksanakan atau tidak

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

7 (Boolean). menunjukkan apakah

button.addEventListener("click", function() {
    orang.getName();
});

_7 telah dilakukan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

9 (Boolean). menunjukkan bahwa acara tersebut dimunculkan oleh browser, bukan secara manual melalui javascript

```
button.dispatchEvent(new Event("click"));
```
0 (Nomor). menunjukkan fase aktif yang sedang berlangsung. (0) tangkap, (1) sasaran, (2) menggelegak
```
button.dispatchEvent(new Event("click"));
```
_1 (Nomor). waktu yang menunjukkan kapan peristiwa itu terjadi

Masih ada lebih banyak properti dari parameter

button.addEventListener("click", function() {
    orang.getName();
});

0. Namun penambahannya tergantung jenis acara yang dimunculkan

Hapus Penangan Acara

Untuk berhenti mendengarkan suatu elemen, kita dapat menggunakan metode

button.dispatchEvent(new Event("click"));

3

var tombol = document.getElementsByTagName("button")[0];

function callback() {
    console.log("#tombol ditekan");
}

// memasang event handler
tombol.addEventListener("click", callback, false);

// melepas event handler
tombol.removeEventListener("click", callback, false);

stopPropagation & stopImmediatePropagation

Kita dapat menghentikan fase dari event dengan menggunakan metode

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

2 dan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

3. Walaupun kegunaannya hampir sama, namun ada hal yang membedakannya

Untuk melihat perbedaan keduanya, silahkan lihat demo ini

JS Bin

Jadi,

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

_2 akan menghentikan fase saat ini. Jadi pada contoh di atas, event

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 on

target.addEventListener(tipeEvent, listener [, useCapture]);

9 tidak dieksekusi ketika

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0 ditekan. Hal yang sama juga terjadi saat menggunakan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

3

Perbedaannya adalah,

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

_3 juga menghentikan

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 yang diinstal untuk mendengarkan acara yang sama. Namun,

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 yang dihentikan hanya pendengar yang diinstal setelah

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 berjalan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

3 diinstal

Jadi, pada contoh di atas,

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 kedua yang dilampirkan ke

button.addEventListener("click", function( e ) {
    var target = e.target;
    target.classList.add("highlight");
});

7 tidak berjalan saat

button.addEventListener("click", function( e ) {
    var target = e.target;
    target.classList.add("highlight");
});

7 ditekan. Itu karena

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 lari pertama

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

3

Sementara itu,

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 adalah yang kedua pada

button.addEventListener("click", function( e ) {
    var target = e.target;

    addHighlighter(target);
});

function addHighlighter( el ) {
    el.classList.add("highlight");
}

2 tetapi dijalankan ketika

button.addEventListener("click", function( e ) {
    var target = e.target;

    addHighlighter(target);
});

function addHighlighter( el ) {
    el.classList.add("highlight");
}

2 ditekan. Meskipun

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 pada

button.addEventListener("click", function( e ) {
    var target = e.target;

    addHighlighter(target);
});

function addHighlighter( el ) {
    el.classList.add("highlight");
}

2 berjalan

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

2

preventDefault

Secara default, browser memiliki reaksinya sendiri ketika suatu elemen memunculkan suatu peristiwa. Misalnya, ketika elemen

button.addEventListener("click", function( e ) {
    var target = e.target;

    addHighlighter(target);
});

function addHighlighter( el ) {
    el.classList.add("highlight");
}

7 ditekan, browser akan mencoba membuka tautan pada elemen tersebut

Bagaimana jika kita ingin browser tidak menjalankan reaksi defaultnya?

JS Bin

Konteks Pada Pendengar

Ada yang perlu kita perhatikan saat menjalankan

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5, yaitu konteks fungsi

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5

Sebagai contoh, lihat demo berikut

JS Bin

Masalahnya adalah, ketika metode

target.addEventListener(tipeEvent, listener [, useCapture]);

_01 dieksekusi, ruang lingkup fungsi bukanlah objek

target.addEventListener(tipeEvent, listener [, useCapture]);

02, tetapi elemen

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

0. Jadi,

target.addEventListener(tipeEvent, listener [, useCapture]);

_04 bernilai

target.addEventListener(tipeEvent, listener [, useCapture]);

05. Karena

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_0 tidak memiliki properti

Untuk mengatasinya, kita dapat menggunakan pendekatan berikut

button.addEventListener("click", function() {
    orang.getName();
});

Atau, kita juga bisa menerapkan metode

target.addEventListener(tipeEvent, listener [, useCapture]);

_07 pada objek

target.addEventListener(tipeEvent, listener [, useCapture]);

02 di atas. Secara otomatis, nilai dari

target.addEventListener(tipeEvent, listener [, useCapture]);

_09 akan melekat pada objek yang memiliki metode

target.addEventListener(tipeEvent, listener [, useCapture]);

07

var orang: {
    name: "keripix",
    handleEvent: function() {
        alert(this.name);
    }
}

button.addEventListener("click", orang, false);

Hasilkan Acara Menggunakan Javascript

Kita dapat membuat event pada sebuah elemen menggunakan javascript

Misalnya, kami ingin menaikkan acara

target.addEventListener(tipeEvent, listener [, useCapture]);

_0 secara manual

button.dispatchEvent(new Event("click"));

Kita juga bisa membuat acara baru

JS Bin

Untuk menambahkan data spesifik ke Objek Acara, kita dapat menambahkannya ke properti

target.addEventListener(tipeEvent, listener [, useCapture]);

12

Kiat

Delegasi Acara

Ketika jumlah

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 yang diinstal pada elemen yang berbeda bertambah, maka kita dihadapkan pada masalah kinerja di browser

Saat

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 diinstal pada elemen di halaman situs web, browser harus menyimpan referensi ke

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5. Yang artinya, peningkatan memori yang dibutuhkan

Semakin banyak

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 dipasang pada elemen pada halaman website, maka browser membutuhkan waktu untuk memasang

target.addEventListener(tipeEvent, listener [, useCapture]);

17

Untuk mengurangi beban, kita bisa menggunakan delegasi acara. Caranya adalah dengan memanfaatkan fase Bubbling yang akan dilalui event saat event dimunculkan. Berikut ini adalah demo pelaksanaan acara delegasi

JS Bin

Jika melihat contoh di atas, maka daripada menginstal

target.addEventListener(tipeEvent, listener [, useCapture]);

17 untuk 5 elemen

target.addEventListener(tipeEvent, listener [, useCapture]);

19, kita dapat menginstal

target.addEventListener(tipeEvent, listener [, useCapture]);

17 pada elemen

target.addEventListener(tipeEvent, listener [, useCapture]);

21. Javascript akan mengeksekusi

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

_5 (berdasarkan contoh di atas), ketika event generation sedang dalam fase bubbling. Berikut adalah contoh penerapan delegasi acara

Penanganan Acara hanya untuk penanganan

Sebaliknya kita menulis

target.addEventListener(tipeEvent, listener [, useCapture]);

_17 seperti contoh berikut

button.addEventListener("click", function( e ) {
    var target = e.target;
    target.classList.add("highlight");
});

Ada baiknya kita mengubahnya menjadi

button.addEventListener("click", function( e ) {
    var target = e.target;

    addHighlighter(target);
});

function addHighlighter( el ) {
    el.classList.add("highlight");
}

Alasannya, pertama, kami memisahkan event handling dari apa yang seharusnya terjadi saat event dimunculkan. Penanganan acara hanya membutuhkan elemen apa

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

3. Ini akan mendelegasikan tugas "apa yang harus dilakukan saat tombol ditekan" ke metode lain

Keuntungan dari pemisahan di atas adalah kita dapat memanfaatkan metode

target.addEventListener(tipeEvent, listener [, useCapture]);

25 di tempat lain. Karena kemungkinan besar, yang diuntungkan dengan adanya metode tersebut tidak hanya

document.addEventListener("click", function() {
    console.log("document: fase bubbling: click");
}, false);

5 di atas

Alasan kedua adalah kita dapat lebih mudah menguji respons terhadap suatu peristiwa tanpa harus mensimulasikan pembuatan peristiwa pada unit pengujian kita. Jadi, pengujian unit kami akan lebih sederhana

Peristiwa apa yang sering digunakan dalam JavaScript jelaskan?

Mengetahui dan Cara Menggunakan EVENT di JavaScript .

OnClick

Dalam perubahan

OnMouseOver & OnMouseOut

OnKeyDown

OnLoad

Apa itu acara Situs web dalam JavaScript?

Arti Acara dalam Javascript Acara adalah sesuatu yang terjadi ketika ada tindakan yang dilakukan oleh pengguna atau sistem pada sebuah halaman web a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> a> . Misalnya, ketika browser selesai menampilkan halaman dokumen html, event onload dapat digunakan.

2 Apa nama peristiwa yang terjadi saat pengguna mengeklik elemen HTML?

onclick = adalah event jika elemen html diklik.

Bagaimana cara memanggil fungsi dalam JavaScript?

Cara Memanggil/Menjalankan Fungsi . Nama fungsi(); Contoh. // buat fungsi function sayHello(){ console. log("Halo Dunia. "); } // panggil fungsi sayHello() // kemudian akan menghasilkan -> Hello World.

kode javascript