Vue.js Olay Yönetimi (Event Handling)

Google Analytics ve Google Tag Manager konularında da etkinliklerle ilgili işlemler yapmıştık. Şimdi, konuyu biraz daha temelden ele alıp, ardından Vue.js bağlamında etkinlikleri (olayları) nasıl yönetebileceğimizden (handling) bahsetmeye çalışacağım.

Olaylar ve Olay Yönetimi

Az önce de bahsettiğim üzere, kullanıcının bir ara birim (interface) ile etkileşim sağlamak amacıyla gerçekleştirdiği işlemler olay / etkinlik (event) olarak ifade edilmektedir. Bu etkinliklerden haberdar olabilmek ve bu olaylarla ilişkili olarak işlemler yürütebilmek için ilgili olayları yakalamalıyız. İşte bu görevi olay yöneticileri (event handler) olarak nitelendirebileceğimiz yapılarla sağlayabiliriz^{1 2}. Olay yöneticileri, ilgili olay yakalandığında olayla ilişkilendirilen işlemi gerçekleştirmek amacıyla tetiklenir.

Bu işlemleri başlıklar halinde ifade edecek olursak:

Olay Kaynağı

Olayın gerçekleştirilmesini sağlayan uygulama bileşenidir; button, text field vb.

Olay Dinleyicisi

Kullanıcı tarafından bir olay gerçekleştirildiğinde ne yapılması gerektiğine karar verir.

Olay Nesnesi

Bir olay gerekleştirildiği anda oluşturulur ve olaylar ilgili bilgileri tutar.

Olay İşleyicileri

Olay dinleyicisi (event listener) tarafından bir olay yakalandığında ilgili işlemin başlatılmasını sağlar.

Olay Yönetimi

Kısa bir giriş ve açıklama bölümünün peşi sıra asıl konumuza geçiş yapabiliriz. Vue.js DOM olaylarını (DOM events) dinlemek ve işlemler yürütmek için v-on direktifini kullanmaktadır. Hemen, olay dinleme (listening to event) ile ilgili basit bir örnek işlem gerçekleştirelim.

<div id="app">
 <div v-cloak>
  <button v-on:click="number += 1">Add 1</button> <button v-on:click="number -= 1">Remove 1</button>
  <p v-if="number != null">Counter: {{ number }}</p>
 </div>
</div>

// Vue v2.x
var app = new Vue({
 el: '#app',
 data: {
  number: 0
 }
});

// Vue v3.x - 1
const app = Vue.createApp({
  data() {
    return {
      number: 0
    }
  }
}).mount('#app');
// Vue v3.x - 2
const app = {
  data() {
    return {
      number: 0
    }
  }
}
Vue.createApp(app).mount('#app');

Örnekte yer alan butonlara tıkladığımız her anda, ilgili buton ile ilişkilendirilen etkinlik işleme alınacak ve app.number içeriği belirtilen işlem (number += 1 ve number -= 1) dahilinde değerlendirilecektir.

Metotlarla Olay İşlemleri

v-on direktifi, karmaşık olay işlemlerinin ele alınması aşamasında metotlarla ilişkili olarak da kullanılabilmektedir.

<div id="app">
 <div v-cloak>
  <button v-on:click="getAlert">Click me!</button>
  <input type="text" v-on:click="getAlert" placeholder="Click me!" />
 </div>
</div>

// Vue v2.x
var app = new Vue({
 el: '#app',
 data: {
  message: `It's a new dawn, it's a new day, it's a new life for you`
 },
 methods: {
  getAlert: function (event) {
   alert('Hello! ' + this.message + '!');
   if (event) {
    alert(event.target.tagName);
   }
  }
 }
});
app.getAlert();

// Vue v3.x
const app = {
    data() {
        return {
            message: `It's a new dawn, it's a new day, it's a new life for you`
        }
    },
    methods: {
        getAlert: function (event) {
            alert('Hello! ' + this.message + '!');
            if (event) alert(event.target.tagName);
        }
    }
}
Vue.createApp(app).mount('#app').getAlert();

Bazen, orijinal bir DOM olayına da satır içinden (inline) erişmemiz gerekebilir, bu gibi durumlarda $event ile erişim sağlayabiliriz.

Event Modifiers

Vue v-on direktifi için çeşitli olay düzenleyiciler sunmaktadır. Düzenleyiciler yazıldıkları sırayla işleme alınırlar. Örneğin; v-on:click.prevent.self ve v-on:click.self.prevent.

.stop

<a v-on:click.stop="..."></a>

.prevent

<form v-on:submit.prevent="..."></form>
<a v-on:click.stop.prevent="..."></a>
<form v-on:submit.prevent></form>

Submit işlemi sonrasında sayfa tekrar yükleme gerçekleştirmeyecektir.

.capture

<div v-on:click.capture="...">...</div>

.self

<div v-on:click.self="...">...</div>

.passive

<div v-on:scroll.passive="onScroll">...</div>

.once

Native DOM olaylarına özel olan diğer değiştiricilerin aksine, .once modifier component olaylarında da kullanılabilir.

<a v-on:click.once="..."></a>

Key Modifiers

.keyCode

Klavye tuşlarının .keyCode tanımları için keycode.info sayfası kullanılabilir. Örneğin, A tuşunun karşılığı KeyA‘dır.

<input v-on:keyup.keyCode="..." />
<input v-on:keyup.keyCodes.a="..." />
<input v-on:keyup.keyCodes.f1="..." />

.enter

<input v-on:keyup.enter="..." />

.tab

<input v-on:keyup.tab="..." />

.delete

“Delete” ve “Backspace” aynı görevi görmektedir.

<input v-on:keyup.delete="..." />

.esc

<input v-on:keyup.esc="..." />

.space

<input v-on:keyup.space="..." />

.down

<input v-on:keyup.down="..." />

.page-down

<input v-on:keyup.page-down="..." />

.mousedown

<input v-on:mousedown="..." />

.up

<input v-on:keyup.up="..." />

.left

Klavye’nin yanı sıra mouse sol click etkinliğinde işlem gerçekleştirir.

<input v-on:keyup.left="..." />
<input v-on:click.left="..." />

.right

Klavye’nin yanı sıra mouse sağ click etkinliğinde işlem gerçekleştirir.

<input v-on:keyup.right="..." />
<input v-on:click.right="..." />

.middle

Sadece mouse orta tuş click etkinliklerinde işlem gerçekleştirir.

<input v-on:click.middle="..." />

.ctrl

<input v-on:keyup.ctrl="..." />
<input v-on:click.ctrl="..." />
<input v-on:click.ctrl.67="..." />

.alt

<input v-on:keyup.alt="..." />
<input v-on:click.alt="..." />

.shift

<input v-on:keyup.right="..." />
<input v-on:keyup.shift.67="..." />

.meta (macOS Command Key (⌘))

<input v-on:keyup.meta="..." />

.exact Modifier

Etkinlik için tam kombinasyon kullanmak istediğimiz durumlarda .exact modifier kullanabiliriz.

<button @click.ctrl="...">Ctrl + ...</button>

Yukarıdaki tanım itibariyle Ctrl tuşuna basılması basılması yeterlidir. Ancak Ctrl ile birlikte diğer tuşlara basılması durumunda da işlem gerçekleştirecektir. Bu gibi durumların önüne geçmek için .exact ifadesini dahil edebiliriz.

<button @click.ctrl.exact="...">Ctrl</button>

Bu durumda sadece Ctrl tuşuna basılı olması ile işlem gerçekleştirilir. Aşağıdaki tanım ise system modifier dışındaki durumlarda (Alt, Ctrl, Shift, Meta) işlem yürütülmesini sağlar.

<button @click.exact="...">Exc. System Modifier</button>

Sonuç Olarak

Vue.js klavye ve mouse etkinlikleri aracılığıyla pek çok işlem yürütmek mümkün. Bu anlamda Vue.js ile hazırlanmış oyunları sahip olduklar olay zenginliği sebebiyle ayrı bir gözle değerlendirmek gerekli. Yine örnek uygulama yazıları çerçevesinde elbette bu konuya dair referanslar vermeye gayret edeceğim.