NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NX.Event() — NexaEvent

Event delegation, registrasi handler ke window, dan jejak audit lewat localStorage. Terkait navigasi & modul: Route, sub-route, modul, meta.

Overview

NexaEvent (dipanggil lewat NX.Event()) menangani klik dengan event delegation di level document, mendaftarkan fungsi ke window, menyimpan data aksi ke localStorage, dan mencegah listener ganda lewat flag internal.

Fitur utama

Fitur Deskripsi
Event delegation Satu listener klik di document, bukan per elemen.
Handler registration Register fungsi ke window secara terpusat.
Storage caching Menyimpan data event ke localStorage untuk audit.
Timestamp tracking Waktu ISO otomatis pada penyimpanan.
Duplicate prevention Mencegah setup delegation berulang.

Cara kerja

Alur dasar

  1. Pengguna mengklik elemen dengan id yang cocok nama handler.
  2. Listener di document menangkap klik, membaca id & atribut.
  3. Jika handler terdaftar (mis. window.saveClick), fungsi dijalankan.
  4. Data disimpan ke localStorage (mis. handler_saveClick) untuk audit.

Alur detail (ringkas)

<button id="saveClick" key="user-123">Save</button>
const eventSystem = NX.Event(); eventSystem.register({ saveClick: (data) => console.log("Save:", data), }); eventSystem.Handler();

API reference

NX.Event()

Factory yang mengembalikan objek sistem event.

const eventSystem = NX.Event();

eventSystem.Handler()

Mengaktifkan delegation klik di document. Panggil sekali setelah register. Mencegah duplikasi dengan flag isEventDelegationActive.

eventSystem.Handler();

eventSystem.register(handlers)

Mendaftarkan banyak handler sekaligus. Kunci objek = nama handler (biasanya sama dengan id elemen).

  • handlers — objek: nama → fungsi (data) => void
eventSystem.register({ saveClick: (data) => { /* ... */ }, deleteClick: (data) => { /* ... */ }, });

Struktur data (contoh):

{ id: string, // dari atribut key (identifier) type: string, // nama handler / id elemen attributes: object, // NamedNodeMap → objek element: HTMLElement }

eventSystem.getHandler(name)

Mengambil data event tersimpan dari localStorage. Mengembalikan objek atau null.

eventSystem.setHandler(name, data)

Menyimpan data ke localStorage. Otomatis menambahkan timestamp (ISO) dan attributes jika relevan.

eventSystem.reset()

Mereset state: listener & pendaftaran elemen terkait sistem event.

eventSystem.getStatus()

Mengembalikan status, misalnya delegationActive dan jumlah elemen terdaftar.

const status = eventSystem.getStatus(); // { delegationActive: true, registeredElements: 5 }

Contoh penggunaan

Contoh 1: contact management

<button id="addContactClick">Add Contact</button> <button id="editClick" key="user-1">Edit</button> <button id="deleteClick" key="user-1">Delete</button>
const eventSystem = NX.Event(); eventSystem.register({ addContactClick: () => openAddModal(), editClick: (data) => openEditModal(data.id), deleteClick: (data) => { if (confirm("Delete user " + data.id + "?")) deleteUser(data.id); }, }); eventSystem.Handler();

Contoh 2: table actions

Gunakan key pada baris untuk mengidentifikasi record (lihat NexaEvent.md).

Contoh 3: audit trail & logging

Gabungkan handler dengan setHandler / getHandler untuk riwayat aksi.

Contoh 4: conditional handling

Baca data.element.dataset untuk membedakan aksi dalam satu handler.

Best practices

Disarankan

  • id elemen bermakna dan konsisten dengan nama handler (mis. saveClick).
  • Register semua handler dulu, baru panggil Handler().
  • Gunakan atribut key sebagai identifier data.
  • Data sensitif dienkripsi sebelum disimpan (mis. NX.NexaCrypto jika tersedia).

Hindari

  • Memanggil Handler() berulang tanpa perlu.
  • Hard-code ID record di dalam handler — gunakan data.id.
  • Menyimpan token mentah di localStorage tanpa perlindungan.

Use cases

CRUD operations

Satu delegation untuk create/read/update/delete dengan handler terpisah.

Modal / dialog

Buka/tutup/simpan modal lewat handler terpusat dan data-element.

Form validation & submission

Validasi di handler sebelum submit.

Audit & compliance

Log setiap aksi pengguna ke sistem audit Anda.

Undo / redo

Simpan riwayat aksi di array saat handler dipanggil.

Struktur data localStorage

Umumnya kunci berbentuk handler_[namaHandler] berisi JSON:

{ "id": "element-key", "type": "handlerName", "timestamp": "2026-04-04T10:30:00.000Z", "attributes": { "id": "handlerName", "key": "element-key", ... } }

Integrasi NX

const eventSystem = NX.Event(); const lastAction = eventSystem.getHandler("saveClick");

Troubleshooting

Handler tidak dipanggil

  1. Pastikan eventSystem.Handler() sudah dipanggil.
  2. Nama handler harus cocok dengan id elemen yang diklik.
  3. Di konsol: cek window.[namaHandler] dan eventSystem.getStatus().

Data tidak ada di localStorage

  1. Pastikan handler benar-benar jalan (bukan error di tengah).
  2. Cek kuota penyimpanan dan izin browser.

Performance tips

  • Batch register({ ... }) daripada banyak panggilan terpisah.
  • Tetap gunakan delegation (default) — satu listener global.
  • Panggil reset() saat ganti route jika perlu membersihkan state.

Lihat juga

Diperbarui: April 2026 — versi dokumen web 1.0