VUE.JS

Vue.js Olay Yönetimi (Event Handling)

Yayın:
Events (Olaylar) bir kullanıcının web sayfası ve/ya uygulama aktif iken gerçekleştirdiği mouse hareketleri (click, hover vb.) ve klavye işlemleri (keypress vb.) ifade etmektedir. Google Analytics ...
GÖRSEL
Events (Olaylar) bir kullanıcının web sayfası ve/ya uygulama aktif iken gerçekleştirdiği mouse hareketleri (click, hover vb.) ve klavye işlemleri (keypress vb.) ifade etmektedir. 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 (Events) ve Olay Yönetimi (Event Handling)

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. 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ğı (Event Source)

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

Olay Dinleyicisi (Event Listener)

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

Olay Nesnesi (Event Object)

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

Olay İşleyicileri (Event Handler)

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

Vue.js Olay Yönetimi (Event Handling)

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>
var app = new Vue({
	el: '#app',
	data: {
		number: null
	}
})
Ö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>
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();
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

Submit işlemi sonrasında sayfa tekrar yükleme gerçekleştirmeyecektir.
<form v-on:submit.prevent="..."></form>
<a v-on:click.stop.prevent="..."></a>
<form v-on:submit.prevent></form>

.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="..." />
.esc
<input v-on:keyup.esc="..." />
.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.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.