Lecture ini adalah lanjutan langsung dari lecture sebelumnya tentang dynamic rendering.

Kalau lecture sebelumnya kita sudah belajar:

“Bagaimana cara menampilkan section tertentu secara dinamis?”

Sekarang kita belajar:

“Bagaimana cara membuat JavaScript bereaksi ketika user melakukan sesuatu, misalnya mengklik tombol/tab?”

Konsep utama lecture ini adalah DOM Event + Event Handling, khususnya menggunakan inline event handler dengan onclick.

1. Apa itu Event?

Event = sesuatu yang terjadi pada halaman/aplikasi.

Contohnya:

• user klik tombol
• user mengarahkan mouse ke element
• user keluar dari element
• user fokus ke input
• user mengetik sesuatu
• user melakukan scroll
• browser di-resize

Untuk lecture ini, fokusnya adalah event yang terjadi pada DOM element.

Misalnya:

<button>Click Me</button>

Ketika user mengklik tombol tersebut:

user
 ↓
klik button
 ↓
CLICK EVENT terjadi

Nah, JavaScript bisa mendeteksi event tersebut dan melakukan sesuatu.

2. JavaScript adalah Event-Driven Programming Language

Ini kalimat yang penting dari lecture:

JavaScript adalah event-driven programming language.

Artinya, banyak program JavaScript bekerja dengan cara:

Tunggu sesuatu terjadi
        ↓
Event terjadi
        ↓
Jalankan kode
        ↓
Berikan respons

Contoh website:

User klik "Login"
        ↓
JavaScript mendeteksi click
        ↓
JavaScript menjalankan function
        ↓
Form diproses
        ↓
Tampilan berubah

Atau:

User mengetik
      ↓
input event
      ↓
JavaScript membaca input
      ↓
menampilkan hasil

Jadi JavaScript bukan hanya:

console.log("Hello");
console.log("World");

tetapi banyak digunakan untuk:

“Kalau sesuatu terjadi, lakukan sesuatu.”

3. Jenis-jenis Event

Lecture membedakan beberapa kategori event.

A. DOM Event

Event yang terjadi pada element halaman.

Contoh:

click
focus
mouseover
mouseenter
mouseout

Misalnya:

<button>

User klik button → click event.

B. Browser Event

Event yang berhubungan dengan browser/window.

Contoh:

scroll
resize
maximize
minimize

Misalnya user scroll halaman:

user scroll
   ↓
browser scroll event

C. Keyboard Event

Event yang terjadi karena keyboard.

Misalnya:

keydown
keyup

User menekan tombol keyboard:

user tekan "A"
      ↓
keyboard event

D. Mouse Event

Event yang berhubungan dengan mouse.

Contohnya:

click
mouseenter
mouseleave
mousedown
mouseup

Untuk lecture ini kita fokus pada:

DOM event, khususnya click.

4. Event Handling itu apa?

Misalnya ada:

<button>Delete</button>

User klik button.

Event terjadi:

CLICK

Kemudian kita ingin JavaScript melakukan:

console.log("Button clicked");

Proses ketika kita membuat JavaScript merespons event disebut:

Event handling

Jadi:

Event
 ↓
JavaScript merespons
 ↓
Event handling

5. Tiga istilah yang WAJIB dibedakan

Lecture memperkenalkan tiga istilah:

Event
Event Listener
Event Handler

Ini sering membingungkan pemula.

5.1 Event

Event = kejadian.

Contoh:

click

User klik button:

CLICK EVENT

5.2 Event Listener

Event listener = sesuatu yang mendengarkan/menunggu event.

Misalnya:

“Kalau button ini diklik, saya mau tahu.”

Secara konsep:

Button
  ↓
Event Listener
  ↓
menunggu click

5.3 Event Handler

Event handler = kode/function yang dijalankan ketika event terjadi.

Misalnya:

function handleClick() {
    console.log("Button clicked");
}

Function tersebut adalah logic yang menangani event.

Jadi:

USER KLIK
   ↓
EVENT
   ↓
LISTENER mendeteksi
   ↓
HANDLER dijalankan
   ↓
JavaScript melakukan sesuatu

6. Analogi sederhana: satpam 🔔

Bayangkan sebuah toko.

Ada pintu:

🚪

Ketika pintu dibuka:

Door Open Event

Kemudian ada satpam yang menunggu:

👮

Satpam tersebut adalah listener.

Dia mendengarkan:

“Apakah pintu dibuka?”

Ketika pintu dibuka, satpam menjalankan prosedur:

"Selamat datang!"

Itulah handler.

Jadi:

Event
= pintu dibuka

Listener
= satpam yang menunggu

Handler
= tindakan ketika pintu dibuka

7. Ada 3 cara menangani event

Lecture menyebut ada tiga cara utama:

1. Inline event handler

onclick="..."

2. Event handler property

Misalnya:

button.onclick = ...

3. addEventListener()

button.addEventListener(...)

Untuk lecture ini kita baru belajar:

Inline event handler

Dua lainnya akan dibahas di lecture berikutnya.

8. Apa itu Inline Event Handler?

Inline artinya kita menuliskan event handler langsung di HTML element.

Misalnya:

<button onclick="sayHello()">
    Click Me
</button>

Perhatikan:

onclick

click adalah nama event.

Kita tambahkan:

on + event

sehingga:

click
 ↓
onclick

Contoh lainnya:

click      → onclick
focus      → onfocus
mouseover  → onmouseover

9. onclick adalah attribute HTML

Misalnya:

<div onclick="sayHello()">
    Home
</div>

Di sini:

onclick="sayHello()"

adalah attribute.

Artinya:

Ketika element ini mengalami click event, jalankan sayHello().

10. Hubungkan dengan lecture Function

Misalnya kita punya:

function sayHello() {
    console.log("Hello");
}

HTML:

<button onclick="sayHello()">
    Click Me
</button>

Saat halaman dimuat:

function belum dijalankan

Function baru dijalankan ketika:

user klik button
       ↓
onclick
       ↓
sayHello()
       ↓
console.log("Hello")

11. Sekarang hubungkan dengan project sebelumnya

Kita punya tiga tab:

Home | EMI Calculator | Apply for Loan

Dan sebelumnya kita sudah membuat function:

renderSelectedSection()

Function tersebut menentukan section mana yang harus ditampilkan.

Sekarang masalahnya:

Bagaimana membuat function tersebut dijalankan ketika user klik tab?

Jawabannya di lecture ini:

onclick

12. Home tab

Misalnya HTML:

<div onclick="renderSelectedSection('homepage')">
    Home
</div>

Artinya:

Ketika Home diklik, panggil renderSelectedSection() dan kirim "homepage".

Jadi:

User klik Home
      ↓
click event
      ↓
onclick
      ↓
renderSelectedSection("homepage")
      ↓
switch
      ↓
case "homepage"
      ↓
render Home

13. EMI Calculator

Untuk EMI:

<div onclick="renderSelectedSection('emi-calculator-page')">
    EMI Calculator
</div>

Ketika diklik:

click
 ↓
renderSelectedSection("emi-calculator-page")
 ↓
switch
 ↓
case "emi-calculator-page"
 ↓
render EMI

14. Apply for Loan

<div onclick="renderSelectedSection('apply-for-loan-page')">
    Apply for Loan
</div>

Ketika diklik:

click
 ↓
renderSelectedSection("apply-for-loan-page")
 ↓
render Loan

15. Kenapa string-nya harus tepat?

Karena function sebelumnya menggunakan:

switch (selectedTab) {
    case "homepage":
        ...
        break;

    case "emi-calculator-page":
        ...
        break;

    case "apply-for-loan-page":
        ...
        break;
}

Maka nilai yang dikirim harus cocok.

Misalnya:

renderSelectedSection("homepage");

akan cocok dengan:

case "homepage":

Tetapi kalau:

renderSelectedSection("home");

sementara case-nya:

case "homepage":

tidak cocok.

Karena string-nya berbeda.

16. Alur lengkapnya

Ini bagian yang paling penting untuk dipahami:

                USER
                  ↓
            klik tab Home
                  ↓
             CLICK EVENT
                  ↓
               onclick
                  ↓
   renderSelectedSection("homepage")
                  ↓
                switch
                  ↓
          case "homepage"
                  ↓
      ambil homeContent
                  ↓
     mainSectionArea.innerHTML
                  ↓
             DOM berubah
                  ↓
           Home ditampilkan

Untuk EMI:

User klik EMI
     ↓
click
     ↓
onclick
     ↓
renderSelectedSection("emi-calculator-page")
     ↓
switch
     ↓
EMI section
     ↓
DOM berubah
     ↓
EMI ditampilkan

17. Ada masalah dari lecture sebelumnya

Nah, sekarang masuk ke bagian yang cukup penting.

Di lecture sebelumnya kita punya masalah ketika variable content dibuat di dalam function.

Misalnya:

function renderSelectedSection(selectedTab) {

    let homeContent =
        document.querySelector(".homepage");

    ...

    mainSectionArea.innerHTML = "";

    ...
}

Masalahnya:

Pertama kali function dijalankan
        ↓
ambil section
        ↓
hapus section dari DOM
        ↓
function selesai

Kemudian user klik tab
        ↓
function dijalankan lagi
        ↓
querySelector(".homepage")
        ↓
homepage sudah tidak ada di DOM
        ↓
null

Akhirnya error.

18. Solusinya: variable content di luar function

Kita sudah belajar di lecture sebelumnya bahwa variable content harus dibuat di luar function:

let homeContent =
    document.querySelector(".homepage");

let emiCalContent =
    document.querySelector(".emi-calculator-page");

let loanContent =
    document.querySelector(".apply-for-loan-page");

Kemudian:

function renderSelectedSection(selectedTab) {
    ...
}

Dengan begitu:

JavaScript mulai
      ↓
ambil Home
ambil EMI
ambil Loan
      ↓
simpan reference
      ↓
selesai

Reference tersebut tidak dibuat ulang setiap kali function dipanggil.

19. Kenapa ini penting untuk event?

Karena sekarang function:

renderSelectedSection()

akan dipanggil berulang kali.

Misalnya:

Klik Home
 ↓
function

Klik EMI
 ↓
function

Klik Loan
 ↓
function

Klik Home
 ↓
function

Klik EMI
 ↓
function

Kalau variable content dibuat di dalam function, kita akan menghadapi masalah DOM yang sama.

Tetapi kalau dibuat di luar:

let homeContent = ...
let emiCalContent = ...
let loanContent = ...

mereka dibuat satu kali.

20. Hubungan dengan Scope

Ini juga mengulang materi scope yang sudah kamu pelajari.

Kalau:

function renderSelectedSection() {

    let homeContent = ...;

}

maka homeContent memiliki function scope.

Dia hanya tersedia di dalam function tersebut.

Dan setiap kali function dipanggil, variable lokal tersebut dibuat dalam execution baru.

Sedangkan:

let homeContent = ...;

function renderSelectedSection() {
    ...
}

homeContent berada di scope luar function.

Function bisa mengaksesnya.

Secara sederhana:

Global scope
│
├── homeContent
├── emiCalContent
├── loanContent
│
└── renderSelectedSection()

Jadi function dapat menggunakan variable tersebut.

Ini adalah contoh nyata bagaimana konsep scope yang sebelumnya kamu pelajari digunakan dalam program.

21. Kenapa awal halaman tetap Home?

Lecture kemudian melakukan:

renderSelectedSection("homepage");

Ini dipanggil langsung ketika JavaScript pertama kali dijalankan.

Tujuannya:

Saat website pertama kali dibuka, tampilkan Home.

Alurnya:

Browser load
   ↓
JavaScript dijalankan
   ↓
renderSelectedSection("homepage")
   ↓
Home ditampilkan

Setelah itu, event handler mengambil alih.

22. Bedakan initial render dan click render

Ada dua situasi.

Saat pertama kali halaman dibuka:

renderSelectedSection("homepage");

Artinya:

Tampilkan Home secara default.

Saat user klik EMI:

onclick="renderSelectedSection('emi-calculator-page')"

Artinya:

Sekarang tampilkan EMI.

Saat user klik Loan:

onclick="renderSelectedSection('apply-for-loan-page')"

Artinya:

Sekarang tampilkan Loan.

Jadi function yang sama digunakan berulang kali.

23. Function yang sama bisa dipanggil berkali-kali

Ini adalah manfaat besar dari function.

Kita punya satu function:

function renderSelectedSection(selectedTab) {
    ...
}

Tetapi bisa dipanggil:

renderSelectedSection("homepage");

renderSelectedSection("emi-calculator-page");

renderSelectedSection("apply-for-loan-page");

Jadi:

             renderSelectedSection()
                    ↑
       ┌────────────┼────────────┐
       ↓            ↓            ↓
     Home           EMI         Loan

Tidak perlu membuat:

renderHome();
renderEMI();
renderLoan();

kalau satu function sudah bisa menangani semuanya.

24. Apa sebenarnya onclick lakukan?

Misalnya:

<div onclick="renderSelectedSection('homepage')">
    Home
</div>

Kita bisa membacanya seperti bahasa manusia:

“Kalau element ini di-click, jalankan renderSelectedSection('homepage').”

Jadi:

onclick
   ↓
WHEN CLICK HAPPENS
   ↓
RUN THIS CODE

25. Inline event handler

Disebut inline karena JavaScript event logic ditulis langsung di HTML:

onclick="..."

Contoh:

<button onclick="alert('Hello')">
    Click
</button>

JavaScript-nya berada di dalam attribute HTML.

Karena itu disebut:

inline event handler

26. Contoh sederhana sebelum kembali ke project

HTML:

<button onclick="sayHello()">
    Click Me
</button>

JavaScript:

function sayHello() {
    console.log("Hello World");
}

Flow:

button
  ↓
user click
  ↓
onclick
  ↓
sayHello()
  ↓
console.log()

27. Inline handler bisa langsung menjalankan expression

Lecture mengatakan attribute onclick bisa berisi JavaScript expression.

Misalnya:

<button onclick="console.log('Hello')">
    Click
</button>

Tidak harus selalu function.

Tetapi dalam contoh project, lebih baik menggunakan function:

onclick="renderSelectedSection('homepage')"

karena logic rendering cukup kompleks.

28. Kenapa function dipakai daripada menulis semua logic di onclick?

Bayangkan kita menulis langsung:

<div onclick="
    mainSectionArea.innerHTML = ...;
    switch (...) {
        ...
    }
">

HTML akan menjadi sangat berantakan.

Lebih baik:

<div onclick="renderSelectedSection('homepage')">

Kemudian logic berada di JavaScript:

function renderSelectedSection(selectedTab) {
    ...
}

Jadi:

HTML
 ↓
menentukan event

JavaScript
 ↓
menangani logic

Walaupun inline handler masih mencampurkan sedikit behavior ke HTML, setidaknya logic utama tetap berada dalam function.

29. Perbedaan event, listener, handler

Mari kita buat sangat jelas.

Misalnya:

<button onclick="sayHello()">

Event

click

Kejadiannya:

User mengklik button.

Listener

Dalam pendekatan inline ini, attribute:

onclick

digunakan untuk memasang respons terhadap event click.

Secara konseptual:

“Dengarkan click pada element ini.”

Handler

sayHello()

adalah kode/function yang dijalankan ketika click terjadi.

30. Analogi restoran 🍜

Bayangkan kamu masuk restoran.

Event

Kamu berkata:

“Saya mau pesan mie.”

Itu adalah kejadian/request.

Listener

Pelayan mendengarkan pesanan:

“Ada pesanan dari meja 5.”

Itu seperti listener.

Handler

Dapur kemudian menjalankan:

“Buat mie.”

Itu adalah handler.

Jadi:

Event
 ↓
Listener
 ↓
Handler
 ↓
Action

31. Hubungan dengan callback

Ini juga nyambung dengan lecture sebelumnya tentang callback function.

Nanti saat menggunakan:

addEventListener()

kita akan sering melihat:

button.addEventListener("click", function () {
    console.log("Clicked");
});

Function:

function () {
    console.log("Clicked");
}

adalah callback.

Artinya konsep event yang sekarang kamu pelajari nanti akan bertemu dengan konsep callback yang sudah kamu pelajari.

Untuk sekarang cukup ingat:

Event terjadi
     ↓
function dijalankan

32. Kenapa JavaScript disebut event-driven?

Karena program tidak selalu melakukan sesuatu secara terus-menerus.

Misalnya website sedang diam:

Website menunggu...

User klik:

CLICK!

JavaScript merespons.

User mengetik:

KEYBOARD EVENT!

JavaScript merespons.

User fokus ke input:

FOCUS!

JavaScript merespons.

User scroll:

SCROLL!

JavaScript merespons.

Jadi:

WAIT
 ↓
EVENT
 ↓
RESPONSE
 ↓
WAIT
 ↓
EVENT
 ↓
RESPONSE

33. Hal yang perlu kamu perhatikan: onclick vs click

Ini sering membingungkan.

Nama event-nya adalah:

click

Tetapi ketika digunakan sebagai attribute HTML:

onclick

Kenapa?

Karena inline event handler menggunakan:

on + nama event

Jadi:

click → onclick
focus → onfocus
load → onload
mouseover → onmouseover

34. Jangan salah menulis

Benar:

onclick="..."

Bukan:

onClick="..."

HTML umumnya tidak membedakan kapitalisasi attribute seperti JavaScript identifier, tetapi ikuti gaya standar lowercase untuk inline HTML event handler agar konsisten.

Dan:

onclick="renderSelectedSection('homepage')"

bukan:

click="..."

35. Apa yang terjadi ketika Home diklik?

Mari kita ikuti satu per satu.

HTML:

<div onclick="renderSelectedSection('homepage')">
    Home
</div>

User klik.

Step 1

Browser mendeteksi:

click event

Step 2

Inline handler:

onclick

dijalankan.

Step 3

JavaScript menjalankan:

renderSelectedSection("homepage");

Step 4

Function menerima:

selectedTab = "homepage";

Step 5

switch dijalankan:

switch (selectedTab)

Step 6

Cocok dengan:

case "homepage":

Step 7

Home dimasukkan ke:

mainSectionArea.innerHTML

Step 8

DOM berubah.

Step 9

Home tampil.

36. Flow lengkap project

┌──────────────────────────────┐
│ Home | EMI | Apply for Loan  │
└──────────────────────────────┘
          │
          │ user click
          ↓
      CLICK EVENT
          ↓
        onclick
          ↓
renderSelectedSection(...)
          ↓
       switch()
          ↓
   ┌──────┼──────────┐
   ↓      ↓          ↓
 Home    EMI        Loan
   ↓      ↓          ↓
 outerHTML masing-masing
          ↓
 mainSectionArea.innerHTML
          ↓
       DOM berubah
          ↓
    halaman berubah

37. Mengapa lecture ini penting?

Karena ini adalah awal dari website interaktif.

Sebelumnya website kita lebih seperti:

HTML
 ↓
tampilkan halaman

Sekarang:

HTML
 ↓
JavaScript
 ↓
menunggu event
 ↓
user melakukan sesuatu
 ↓
JavaScript merespons
 ↓
DOM berubah
 ↓
website berubah

Ini adalah pola yang akan kamu lihat di hampir semua aplikasi web.

38. Contoh nyata di dunia website

Hampir semua hal interaktif menggunakan konsep event.

Tombol Like

click
 ↓
event handler
 ↓
jumlah like + 1

Tombol Dark Mode

click
 ↓
event handler
 ↓
classList.add("dark")

Form Login

submit
 ↓
event handler
 ↓
validasi username/password

Search

input
 ↓
event handler
 ↓
cari data
 ↓
tampilkan hasil

Dropdown

click
 ↓
event handler
 ↓
tampilkan menu

Semuanya mengikuti pola:

EVENT
  ↓
LISTENER
  ↓
HANDLER
  ↓
ACTION

39. Kekurangan inline event handler

Walaupun lecture mengajarkan cara ini, kamu perlu tahu bahwa dalam praktik modern, inline event handler biasanya bukan pilihan utama.

Misalnya:

<button onclick="sayHello()">

akan mencampurkan HTML dan JavaScript.

Jika aplikasinya besar, HTML bisa menjadi penuh dengan:

onclick="..."
onchange="..."
onmouseover="..."

Nanti kamu akan belajar cara yang lebih rapi:

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

Jadi untuk sekarang:

Pelajari inline karena itu bagian dari course, tetapi jangan menganggap ini selalu cara terbaik untuk project besar.

40. Tiga metode event handling

Supaya kamu punya gambaran ke depan:

1. Inline

<button onclick="sayHello()">

2. Event handler property

button.onclick = sayHello;

3. addEventListener

button.addEventListener("click", sayHello);

Lecture ini:

✅ Inline event handler

Lecture berikutnya kemungkinan:

➡️ Event handler property
➡️ addEventListener()

41. Kesalahan umum pemula

❌ 1. Menulis function dengan () saat ingin menyimpan function

Untuk event handler property nanti:

button.onclick = sayHello;

bukan:

button.onclick = sayHello();

Karena:

sayHello

berarti function.

Sedangkan:

sayHello()

berarti jalankan function sekarang.

Untuk inline:

onclick="sayHello()"

memang benar karena attribute tersebut berisi kode yang akan dijalankan ketika event terjadi.

❌ 2. String tidak sama dengan case

Kalau:

case "homepage":

maka:

onclick="renderSelectedSection('homepage')"

harus mengirim string yang sama.

❌ 3. Lupa tanda kutip

Misalnya:

onclick="renderSelectedSection(homepage)"

berbeda dengan:

onclick="renderSelectedSection('homepage')"

Yang kedua mengirim string "homepage".

42. Hubungkan dengan lecture switch

Sekarang konsep switch yang kamu pelajari sebelumnya menjadi nyata.

Kita punya:

switch (selectedTab) {

    case "homepage":
        ...
        break;

    case "emi-calculator-page":
        ...
        break;

    case "apply-for-loan-page":
        ...
        break;
}

Dan event menentukan nilai selectedTab.

Jadi:

CLICK HOME
    ↓
"homepage"
    ↓
switch
    ↓
case homepage

atau:

CLICK EMI
    ↓
"emi-calculator-page"
    ↓
switch
    ↓
case emi-calculator-page

43. Hubungkan dengan lecture Function

Kita juga menggunakan:

function renderSelectedSection(selectedTab) {
    ...
}

Ini mengulang semua konsep function:

• function declaration
• parameter
• argument
• function call
• reusable code

Misalnya:

onclick="renderSelectedSection('homepage')"

renderSelectedSection:

function

selectedTab di function:

parameter

"homepage":

argument

renderSelectedSection(...):

function call

44. Hubungkan dengan lecture Scope

Variable:

let homeContent = ...;

diletakkan di luar function.

Kenapa?

Karena function:

renderSelectedSection()

dipanggil berkali-kali oleh event.

Kita ingin homeContent, emiCalContent, dan loanContent dibuat satu kali, bukan dibuat ulang setiap click.

Ini contoh nyata kegunaan scope.

45. Hubungkan dengan lecture DOM

Kita menggunakan:

document.querySelector(...)

untuk mengambil element.

Kemudian:

element.outerHTML

untuk mendapatkan HTML.

Kemudian:

mainSectionArea.innerHTML = ...

untuk mengubah DOM.

Kemudian event:

click

memicu function.

Jadi semua materi mulai terhubung:

DOM
 ↓
querySelector()
 ↓
Element object
 ↓
outerHTML / innerHTML
 ↓
Function
 ↓
Event
 ↓
Dynamic rendering

46. Mental model terbaik untuk event

Kalau kamu masih bingung tentang event, ingat kalimat ini:

“Kalau sesuatu terjadi, jalankan sesuatu.”

Dalam JavaScript:

KALAU event terjadi
        ↓
JALANKAN handler

Contoh:

Kalau button diklik
        ↓
jalankan function

Kalau input berubah
        ↓
jalankan function

Kalau mouse masuk
        ↓
jalankan function

47. Cheat sheet lecture

Event

click
focus
mouseover
scroll
keydown

Inline event handler

onclick="..."

Memanggil function

onclick="sayHello()"

Mengirim argument

onclick="renderSelectedSection('homepage')"

Tiga konsep utama

Event
= kejadian

Event Listener
= mendengarkan event

Event Handler
= kode/function yang dijalankan

Flow

User melakukan sesuatu
        ↓
Event terjadi
        ↓
Listener mendeteksi
        ↓
Handler dijalankan
        ↓
DOM berubah
        ↓
UI berubah

48. Kesimpulan

Lecture ini sebenarnya memperkenalkan satu konsep besar:

Website tidak hanya menampilkan informasi, tetapi bisa bereaksi terhadap tindakan user.

Dan mekanismenya:

USER
 ↓
melakukan sesuatu
 ↓
EVENT
 ↓
EVENT LISTENER
 ↓
EVENT HANDLER
 ↓
JAVASCRIPT
 ↓
DOM MANIPULATION
 ↓
TAMPILAN WEBSITE BERUBAH

Dalam project kamu:

User klik "EMI Calculator"
            ↓
       click event
            ↓
         onclick
            ↓
renderSelectedSection("emi-calculator-page")
            ↓
          switch
            ↓
   emiCalContent.outerHTML
            ↓
mainSectionArea.innerHTML = ...
            ↓
          DOM berubah
            ↓
   EMI Calculator tampil

Jadi kalau lecture sebelumnya adalah “kita bisa mengubah DOM”, lecture ini menambahkan:

“Kapan kita harus mengubah DOM?”

Jawabannya:

Ketika sebuah event terjadi.

Dan untuk lecture ini, event tersebut adalah click, sedangkan cara menangkapnya adalah inline event handler dengan onclick.

Satu kalimat yang sebaiknya kamu benar-benar ingat:

Event = sesuatu terjadi, listener = menunggu/mendengarkan sesuatu itu, handler = kode yang dijalankan sebagai respons terhadap sesuatu itu.