Cara menggunakan active event javascript

Question

menurut saya problemnya ada 2. 1. karena agan selalu jalanin 2 fungsi setiap menu di click, scrollDown dan scrollUp

anchor[0].onclick = function() {scrollDown('about');scrollUp('about') }

2. setting interval = 30 juga crusial. klik pertama pasti jalan karena posisi scroll di atas, target pasti dibawah. scrollDown jalan dan berhenti di posisi target. Tapi sebetulnya problem sudah dimulai disini, posisi posY ga bisa benar2 sesuai dngan target karena intervalnya 30, pasti lebih sedikit. dan ketika klik berikutnya jalan, scrollDown scrollUp saling tumpuk karena posY ga pernah bisa pas sama target, jadinya clearTimeoutnya ga pernah jalan, ini yang bikin halaman jadi loncat2. coba intrvalnya diganti 1, walaupun scrollnya lambat tapi pasti berhenti pas di target dan ga akan ada problem di scrollnya. solusinya bisa diatur dari click anchor, jangan langsung jalan keduanya. cek posisi scrollTop, kalau lebih kecil dari target scrollDown, kalau lebih besar scrollUp. solusi lain bisa juga tetap pakai keduanya, tapi interval diatur. kalau distance lebih dari 50 gpp pakai interval 30, kalau kurang dari itu intervalnya dikecilin.

Table of Contents Show

Cara Menggunakan Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 di JavaScript
Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar
Contoh Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4
Cara Menggunakan <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 click di JavaScript
Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar
Cara Membuat Tombol "Lebih Banyak" dan "Lebih Sedikit" dengan JavaScript
A Video Explanation of HTML Button onclick
Apa itu event Website pada JavaScript?
AddEventListener JavaScript untuk apa?
2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?
Apa yang dimaksud dengan event listener?

Tautan-tautan membawa kamu ke suatu bagian dari sebuah halaman, ke halaman lain dari suatu situs web, atau ke situs web yang lain. Di sisi lain, tombol biasanya dimanipulasi oleh event (peristiwa) JavaScript sehingga mereka bisa memicu fungsionalitas tertentu.

Dalam tutorial ini, kita akan mengeksplorasi dua cara yang berbeda untuk mengeksekusi event klik di JavaScript menggunakan dua metode yang berbeda.

Pertama-tama, kita akan melihat cara tradisional

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 yang bisa kamu terapkan di halaman HTML. Kemudian, kita akan melihat bagaimana cara "klik"

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

5, yang lebih modern, bekerja, yang dapat mengizinkanmu memisahkan HTML dari JavaScript.

Cara Menggunakan Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 di JavaScript

Event

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 menjalankan suatu fungsionalitas saat suatu tombol diklik. Contohnya saat seorang pengguna mengumpulkan formulir, saat kamu mengubah konten tertentu di halaman web, dan pada situasi-situasi lain seperti itu.

Kamu menempatkan fungsi JavaScript yang ingin kamu jalankan di dalam tag pembuka tombolnya.

Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4 dasar

<elemen onclick="fungsiUntukDijalankan()">Klik</elemen>

Contohnya

<button onclick="fungsiUntukDijalankan()">Klik</button>

Ingatlah bahwa atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 adalah JavaScript murni. Nilai yang diterima sudah jelas, yaitu fungsi apa yang ingin kamu jalankan, karena dia dipanggil di tag pembuka.

Dalam JavaScript, kamu memanggil fungsi dengan menggunakan namanya, lalu menambahkan tanda kurung setelah pengenal fungsinya (namanya).

Contoh Event <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 4

Saya sudah mempersiapkan sedikit kode HTML sederhana dengan sedikit hiasan supaya kita bisa berlatih menggunakan event

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 dalam dunia nyata.

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

Dan di sini ada CSSnya juga, supaya jadi keren, bersamaan dengan semua sisa kode contohnya:

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

Jadi, di halaman web, inilah yang kita punya:

Tujuan kita adalah untuk mengubah warna teks menjadi biru saat kita mengeklik tombolnya. Jadi, kita perlu menambahkan atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 ke tombol kita, lalu menulis fungsi JavaScript untuk mengubah warnanya.

Jadi, kita perlu membuat sedikit perubahan pada HTML kita:

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

Fungsi yang ingin kita jalankan adalah

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

3. Jadi, kita perlu menuliskannya dalam sebuah file JavaScript di dalam tag

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

4.

Kalau kamu ingin menulis skrip kamu dalam file JavaScript, kamu harus menghubungkannya ke HTML menggunakan sintaksis di bawah ini:

<script src="path-ke-file-javascript"></script>

Kalau kamu mau menulis skripnya dalam file HTML, simpan saja dalam tag script:

<script>
  // Skripmu
</script>

Sekarang, ayo kita tulis fungsi

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

3 kita.

Pertama-tama, kita harus memilih elemen yang ingin kita manipulasi, yaitu tulisan freeCodeCamp dalam tag

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

6.

Dalam JavaScript, kamu bisa melakukannya dengan metode DOM

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

7,

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

8, atau

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

9. Kemudian, kamu bisa menyimpannya dalam sebuah variabel.

Dalam tutorial ini, saya akan menggunakan

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

9 karena dia lebih modern dan cepat. Saya juga akan menggunakan

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

1 untuk mendeklarasikan variabel-variabel kita alih-alih menggunakan

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

2 dan

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

3, karena menggunakan

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

1 lebih aman sebab variabelnya hanya bisa dibaca saja.

const nama = document.querySelector(".nama");

Sekarang, karena kita sudah mendapatkan tulisannya, mari kita buat fungsi kita. Dalam JavaScript, sintaksis fungsi dasarnya seperti ini:

function namaFungsi () {
    // Hal yang akan dilakukan
}

Jadi, mari kita buat fungsi kita:

function ubahWarna() {
    nama.style.color = "blue";
}

Apa yang sedang terjadi?

Ingatlah,

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

3 adalah fungsi yang akan kita eksekusi. Itulah mengapa pengenal fungsinya (namanya) disetel menjadi

<div>
  <p class="nama">freeCodeCamp</p>
  <button onclick="ubahWarna()">Ubah menjadi biru</button>
</div>

6. Jika namanya tidak berhubungan dengan apa yang ada di HTML, programnya tidak akan berjalan.

Dalam DOM (Document Object Model atau Model Obyek Dokumen, merujuk kepada semua HTMLnya), untuk mengubah semua yang berkaitan dengan hiasan, kamu harus menulis “style” diikuti dengan titik (.). Dia diikuti dengan apa yang ingin kamu ubah, mungkin warna tulisannya, warna latar belakangnya, ukuran tulisan, dan lain-lain.

Jadi, di dalam fungsi kita, kita akan mengambil nama variabel yang kita deklarasikan untuk mendapatkan tulisan freeCodeCampnya, kemudian kita akan ubah warnanya menjadi biru.

Warna tulisan kita menjadi biru setiap kali tombolnya diklik:

Kode kita berhasil!

Kita bisa membuatnya lebih keren lagi dengan mengubah tulisan kita menjadi berwarna-warni:

<button onclick="fungsiUntukDijalankan()">Klik</button>

0

Jadi, apa yang kita mau lakukan sekarang adalah mengubah tulisannya menjadi biru, hijau, dan jingga.

Sekarang, fungsi-fungsi

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 di HTML kita mengambil nilai-nilai warna untuk tulisan yang ingin kita ubah. Ini disebut dengan parameter dalam JavaScript. Fungsi yang akan kita tulis memilikinya juga: parameternya akan kita namakan "warna".

Halaman web kita berubah sedikit:

Jadi, mari kita ambil tulisan freeCodeCamp kita dan tulis fungsi untuk mengubah warnanya menjadi biru, hijau, dan jingga:

<button onclick="fungsiUntukDijalankan()">Klik</button>

1

Blok kode pada fungsi mengambil nama variabel (tempat kita menyimpan tulisan freeCodeCamp kita), kemudian menyetel warnanya menjadi warna apa saja sesuai warna yang kita berikan kepada fungsi-fungsi

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

3 dalam tombol-tombol HTML.

Cara Menggunakan <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 click di JavaScript

Dalam JavaScript, ada beberapa cara untuk melakukan hal yang sama. Seperti JavaScript sendiri telah berevolusi seiring berjalannya waktu, kita mulai memisahkan kode HTML, CSS, dan JavaScript supaya mengikuti praktek koding yang baik.

Event listener (pendengar peristiwa) membuat hal ini mungkin dilakukan karena mereka mengizinkan kamu untuk memisahkan JavaScript dari HTML. Kamu juga bisa melakukannya dengan onclick, tetapi ayo kita coba pakai cara lain untuk saat ini.

Sintaksis <div> <p class="nama">freeCodeCamp</p> <button>Ubah menjadi biru</button> </div> 5 dasar

<button onclick="fungsiUntukDijalankan()">Klik</button>

2

Sekarang, mari kita ubah tulisan freeCodeCamp menjadi biru menggunakan eventListener klik.

Ini adalah HTML kita yang baru:

<button onclick="fungsiUntukDijalankan()">Klik</button>

3

Dan ini hasilnya:

Untuk skrip yang sekarang, kita perlu mengambil tombolnya juga (bukan hanya tulisan freeCodeCampnya saja). Ini dilakukan karena tidak ada JavaScript di tag pembuka tombol kita, keren kan?

Jadi, skrip kita sekarang terlihat seperti ini:

<button onclick="fungsiUntukDijalankan()">Klik</button>

4

Kita juga bisa memisahkan fungsi kita dari

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

5 dan fungsionalitasnya tetap sama:

<button onclick="fungsiUntukDijalankan()">Klik</button>

5

Cara Membuat Tombol "Lebih Banyak" dan "Lebih Sedikit" dengan JavaScript

Salah satu cara belajar terbaik adalah dengan membuat proyek, jadi mari kita gunakan apa yang sudah kita pelajari tentang

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 dan

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

5 "click" untuk membuat sesuatu.

Saat kamu mengunjungi sebuah blog, kamu sering kali hanya bisa melihat sebagian artikelnya dulu. Sesudah itu, baru kamu bisa mengeklik tombol "baca selengkapnya" untuk melihat sisanya. Mari kita coba membuatnya.

Ini adalah HTMLnya:

<button onclick="fungsiUntukDijalankan()">Klik</button>

6

Ini adalah HTML sederhana dengan beberapa fakta mengenai freeCodeCamp. Ada juga tombol yang sudah kami sisipkan

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4. Fungsi yang mau kita jalankan adalah

<script src="path-ke-file-javascript"></script>

5. Fungsi ini akan kita tulis sebentar lagi.

Tanpa CSS, inilah yang kita punya:

Ini ga gimana jelek, tapi kita bisa membuatnya menjadi lebih keren dan bekerja sesuai dengan apa yang kita mau. Jadi, kita punya sedikit CSS yang akan saya jelaskan di bawah ini:

<button onclick="fungsiUntukDijalankan()">Klik</button>

7

Apa yang CSS ini lakukan?

Dengan pemilih universal (

<script src="path-ke-file-javascript"></script>

6), kita sedang menyingkirkan margin dan padding bawaan yang ditetapkan ke elemen-elemen, jadi kita bisa menambahkan margin dan padding kita sendiri.

Kita juga punya box sizing (ukuran kotak) yang diisi dengan border-box jadi kita bisa memasukkan padding dan border dalam lebar dan tinggi total elemen.

Kita juga membuat semua yang ada di body menjadi di tengah menggunakan Flexbox dan membuat warna latar belakangnya menjadi abu-abu cerah.

Elemen

<script src="path-ke-file-javascript"></script>

7 kita, yang berisi tulisan, memiliki lebar

<script src="path-ke-file-javascript"></script>

8, latar belakang putih (#fff), dan padding

<script src="path-ke-file-javascript"></script>

9 di atas,

<script src="path-ke-file-javascript"></script>

9 di kiri dan kanan, dan

<script>
  // Skripmu
</script>

1 di bawah.

Tag paragraf di dalamnya memiliki ukuran tulisan

<script>
  // Skripmu
</script>

2, lalu kita berikan juga tinggi maksimal

<script>
  // Skripmu
</script>

3. Karena adanya tinggi maksimal pada elemen artikel, tidak semua tulisan akan ditampung, sebagian akan meluap (overflow). Untuk memperbaikinya, kita akan menyetel overflow menjadi tersembunyi (hidden) supaya tulisannya tidak ditampilkan dulu.

Properti transition memastikan bahwa semua perubahan terjadi setelah 1 detik. Semua tulisan dalam

<script>
  // Skripmu
</script>

4 dijustifikasi dan margin atasnya dibuat 20 piksel supaya tidak terlalu menempel ke halaman bagian atas.

Karena kita sudah menyingkirkan margin bawaan, semua paragraf kita tertekan. Jadi, kita buat margin bawahnya menjadi 16 piksel supaya paragraf-paragrafnya terpisah satu sama lain.

Penyeleksi kita,

<script>
  // Skripmu
</script>

5, memiliki properti

<script>
  // Skripmu
</script>

6 sebesar

<script>
  // Skripmu
</script>

7. Ini berarti, untuk setiap elemen artikel yang mengandung kelas

<script>
  // Skripmu
</script>

8, tinggi maksimalnya akan berubah dari

<script>
  // Skripmu
</script>

3 menjadi

<script>
  // Skripmu
</script>

7 untuk menunjukkan sisa artikelnya. Hal ini mungkin dilakukan karena JavaScript – sang pengubah permainan.

Kita hias tombol kita dengan latar belakang gelap dan membuat warna tulisannya menjadi putih. Kita atur bordernya menjadi tidak ada (none) untuk menyingkirkan border HTML bawaan pada tombol, lalu kita berikan radius border

const nama = document.querySelector(".nama");

1 supaya tombolnya memiliki tepian yang bulat.

Terakhir, kita gunakan pseudo-class

const nama = document.querySelector(".nama");

2 pada CSS untuk mengubah kursor tombol menjadi pointer (menunjuk). Warna latar belakang akan berubah sedikit saat pengguna melayangkan kursornya di atasnya.

Sudah selesai – itulah CSSnya.

Halaman kita sekarang lebih cantik:

Hal selanjutnya yang harus kita lakukan adalah menulis JavaScript supaya kita bisa melihat sisa artikel yang disembunyikan.

Kita punya atribut

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4 dalam tag pembuka tombol kita yang siap menjalankan fungsi

<script src="path-ke-file-javascript"></script>

5, jadi, ayo kita buat fungsinya.

Kita harus mendapatkan artikel kita dulu, karena kita nanti akan menampilkan sisanya:

<button onclick="fungsiUntukDijalankan()">Klik</button>

8

Hal selanjutnya yang harus kita lakukan adalah menulis fungsi

<script src="path-ke-file-javascript"></script>

5, jadi kita bisa berpindah-pindah antara melihat sisa artikel dan menyembunyikan sisanya.

<button onclick="fungsiUntukDijalankan()">Klik</button>

9

Apa yang dilakukan fungsi ini?

Kita menggunakan pernyataan

const nama = document.querySelector(".nama");

6 di sini. Ini adalah bagian penting dari JavaScript yang membantumu membuat keputusan dalam kodemu jika suatu kondisi terpenuhi.

Sintaksis dasarnya seperti ini:

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

0

Di sini, jika nama kelas artikel sama dengan open (berarti kita ingin menambahkan kelas open di sini, yang sebelumnya disetel tinggi maksimalnya menjadi 1000px di CSS), maka kita ingin melihat sisa artikelnya. Sebaliknya, kita ingin artikelnya mengembalikan keadaannya menjadi seperti semula, yaitu sebagian tulisannya disembunyikan.

Kita bisa melakukannya dengan menerapkan kelas open pada artikel di blok else, yang akan membuatnya menampilkan sisa artikelnya. Kemudian, kita setel kelasnya menjadi string kosong (none) di blok if, yang akan mengembalikannya ke kondisi semula.

Kode kita sekarang bekerja dengan transisi yang mulus:

Kita bisa memisahkan HTML dan JavaScript, namun tetap menggunakan

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

4, karena onclick itu JavaScript. Jadi, kita bisa menulis kode ini dalam file JavaScript alih-alih memulai dari HTML.

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

1

Kita juga bisa menggunakan eventListener:

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

2

<div>
  <p class="nama">freeCodeCamp</p>
  <button>Ubah menjadi biru</button>
</div>

3

Fungsionalitas kita tetap sama!

A Video Explanation of HTML Button onclick

Kesimpulan

Semoga tutorial ini membantumu memahami bagaimana event klik bekerja dalam JavaScript. Kita telah mengeksplorasi dua metode yang berbeda di sini, jadi sekarang kamu bisa mulai menggunakannya untuk proyek-proyek kodingan kamu.

Terima kasih sudah membaca, tetaplah meng-koding.

Author: Kolade Chris (English)

Web developer and technical writer focusing on frontend technologies.

Translator: Kevin Matthew

Apa itu event Website pada JavaScript?

Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

AddEventListener JavaScript untuk apa?

AddEventListener adalah method yang sangat penting dalam JavaScript. Merupakan method yang berfungsi untuk membuat event (click, change, mouseout, dll) untuk keperluan manipulasi DOM. Dalam artikel kali ini, saya akan menunjukan bagaimana cara menggunakannya.

2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?

onclick = adalah event jika sebuah element html di klik.

Apa yang dimaksud dengan event listener?

Jawab : Event listener adalah sebuah konsep untuk merespon kegiatan yang terjadi didalam suatuobjek. Event listener merupakan implementasi penyampaian message antar objek. Objek yang mendapat message akan melakukan suatu action yang telah ditentukan didalamprogram.

kode javascript