ss-on

Arahan ss-on melampirkan pendengar peristiwa kepada elemen. Ia menyokong semua peristiwa DOM dengan modifier pilihan untuk corak biasa.

CDN

<script src="https://cdn.jsdelivr.net/npm/@bookklik/senangstart-actions@latest/dist/senangstart-actions-on.min.js"></script>

Sintaks

<element ss-on:event="expression"></element>
<element ss-on:event.modifier="expression"></element>

Peristiwa Asas

Klik

<div ss-data="{ count: 0 }">
  <button ss-on:click="count++">Diklik <span ss-text="count"></span> kali</button>
</div>

Peristiwa Papan Kekunci

<div ss-data="{ value: '' }">
  <!-- Trigger hanya pada Enter -->
  <input ss-model="value" ss-on:keyup.enter="alert('Dihantar: ' + value)">
  
  <!-- Trigger hanya pada Escape -->
  <input ss-on:keydown.escape="value = ''">
</div>

Peristiwa Borang

Submit

<div ss-data="{ email: '' }">
  <form ss-on:submit.prevent="console.log('Menghantar:', email)">
    <input type="email" ss-model="email" required>
    <button type="submit">Hantar</button>
  </form>
</div>

Modifier Peristiwa

.prevent

Memanggil event.preventDefault():

<a href="/somewhere" ss-on:click.prevent="handleClick()">
  Tidak akan navigate
</a>

.stop

Memanggil event.stopPropagation():

<div ss-on:click="console.log('luar')">
  <button ss-on:click.stop="console.log('dalam')">
    Tidak akan trigger klik luar
  </button>
</div>

.self

Trigger hanya jika sasaran peristiwa adalah elemen itu sendiri:

<div ss-on:click.self="closeModal()" class="modal-backdrop">
  <div class="modal">
    Klik di sini tidak akan tutup
  </div>
</div>

.once

Trigger hanya sekali. Pendengar dibuang daripada sasaran sebenar (elemen, window, atau document):

<button ss-on:click.once="initializeApp()">
  Initialize (hanya berfungsi sekali)
</button>

.outside / .away

Trigger hanya apabila peristiwa berlaku di luar elemen (pendengar dilampirkan pada document):

<div ss-on:click.outside="closeModal()" class="modal">
  Klik di luar akan tutup modal
</div>

.window dan .document

Lampirkan pendengar pada window atau document:

<div ss-on:keydown.window.slash="openSearch()">
<div ss-on:resize.window="recalculate()">

.capture dan .passive

Hantar pilihan pendengar kepada addEventListener:

<!-- Pendengar fasa capture -->
<div ss-on:click.capture="handleCapture()">

<!-- Pendengar pasif -->
<div ss-on:scroll.passive="onScroll()">

<!-- Secara jelas tidak pasif -->
<div ss-on:touchstart.passive.false="onTouch()">

.debounce dan .throttle

Debounce atau throttle pengendali. Lalai ialah 250ms:

<input ss-on:input.debounce="search(query)">
<input ss-on:input.debounce.500ms="search(query)">
<div ss-on:scroll.throttle="onScroll()">
<div ss-on:scroll.throttle.750ms="onScroll()">

.camel dan .dot

Tukar nama peristiwa (berguna untuk peristiwa tersuai):

<!-- Dengar "customEvent" -->
<div ss-on:custom-event.camel="handler()">

<!-- Dengar "custom.event" -->
<div ss-on:custom-event.dot="handler()">

Modifier Sistem

Macro untuk KeyboardEvent.key dan peristiwa tetikus:

• .ctrl, .shift, .alt, .meta — kekunci sistem
• .cmd, .super — alias untuk .meta
• .esc — Escape
• .space / .spacebar — Space
• .slash — /
• .period — .
• .comma — ,
• .equal — =
• .minus — -
• .underscore — _
• .up, .down, .left, .right — Kekunci anak panah

Mana-mana nama kekunci, tulis dalam kebab-case (contoh .arrow-up, .page-down), boleh digunakan sebagai modifier.

Rujukan Modifier

Modifier	Tingkah Laku
.prevent	Memanggil event.preventDefault()
.stop	Memanggil event.stopPropagation()
.self	Hanya trigger apabila event.target ialah elemen itu sendiri
.once	Buang pendengar selepas pelaksanaan pertama
.outside / .away	Trigger hanya bila peristiwa berpunca di luar elemen (dilampirkan pada document)
.window	Lampirkan pendengar pada window
.document	Lampirkan pendengar pada document
.capture	Guna fasa capture ({ capture: true })
.passive	Guna { passive: true } (atau false dengan .passive.false)
.debounce / .debounce.250ms	Debounce pengendali (lalai 250ms)
.throttle / .throttle.250ms	Throttle pengendali (lalai 250ms)
.camel	Tukar custom-event kepada customEvent
.dot	Tukar custom-event kepada custom.event
Nama kekunci / alias	Tapis peristiwa papan kekunci mengikut kekunci

Mengakses Objek Event

Gunakan $event untuk mengakses peristiwa natif:

<div ss-data="{}">
  <input ss-on:input="console.log($event.target.value)">
</div>

Rujukan Kaedah Kosong (Bare Method)

Jika ungkapan hanya nama kaedah, ia dipanggil dengan peristiwa sebagai hujahnya:

<div ss-data="{ handleClick(e) { console.log(e.type) } }">
  <button ss-on:click="handleClick">Klik</button>
</div>

Contoh Langsung

<!DOCTYPE html>
<html>
<head>
  <title>Contoh ss-on</title>
  <style>
    .canvas { 
      width: 300px; 
      height: 200px; 
      border: 1px solid #ddd; 
      position: relative;
    }
    .dot {
      width: 10px;
      height: 10px;
      background: red;
      border-radius: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div ss-data="{ 
    clicks: [],
    addClick(e) {
      const rect = e.target.getBoundingClientRect()
      this.clicks.push({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      })
    },
    clear() {
      this.clicks = []
    }
  }">
    <h2>Kanvas Klik</h2>
    
    <div class="canvas" ss-on:click="addClick($event)">
      <template ss-for="click in clicks">
        <div class="dot" ss-bind:style="'left:' + click.x + 'px; top:' + click.y + 'px'"></div>
      </template>
    </div>
    
    <p ss-text="clicks.length + ' klik'"></p>
    <button ss-on:click="clear()">Kosongkan</button>
  </div>

  <script src="https://unpkg.com/@bookklik/senangstart-actions"></script>
</body>
</html>

Arahan Berkaitan

• ss-model - Pengikatan dua hala
• ss-data - Tentukan kaedah pengendali peristiwa
• Sifat Ajaib - $event, $dispatch