Olay Yönetimi

Olay Yönetimi

Olayları Dinlemek

DOM olaylarını dinlemek ve tetiklendiğinde bazı JavaScript kodları çalıştırmak için genellikle @ sembolü ile kısalttığımız v-on yönergesini kullanabiliriz. Kullanımı v-on:click="handler" veya kısayolu ile @click="handler" şeklindedir.

Handler değerlerinden biri aşağıdakilerden biri olabilir:

1. Satır içi handler'lar: Olay tetiklendiğinde çalıştırılacak satır içi JavaScript (yerel onclick niteliğine benzer).
2. Metot handler'lar: Bileşende tanımlı bir metoda işaret eden bir özellik adı veya yolu.

Satır İçi Handler'lar

Satır içi handler'lar genellikle basit durumlarda kullanılır, örneğin:

const count = ref(0)

data() {
  return {
    count: 0
  }
}

<button @click="count++">1 Ekle</button>
<p>Sayım: {{ count }}</p>

Playground'da Deneyin

Playground'da Deneyin

Metot Handler'lar

Birçok olay handler'ının mantığı daha karmaşık olacaktır ve bu nedenle satır içi handler'lar ile uygulanması mümkün olmayabilir. Bu yüzden v-on, çağrılacak bir bileşen metodunun adını veya yolunu kabul edebilir.

Örneğin:

const name = ref('Vue.js')

function greet(event) {
  alert(`Merhaba ${name.value}!`)
  // `event` yerel DOM olay
  if (event) {
    alert(event.target.tagName)
  }
}

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // `this` metodların içinde mevcut aktif örneğe işaret eder
    alert(`Merhaba ${this.name}!`)
    // `event` yerel DOM olay
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` yukarıda tanımlanan metodun adıdır -->
<button @click="greet">Selamla</button>

Playground'da Deneyin

Playground'da Deneyin

Bir metot handler'ı otomatik olarak tetikleyen yerel DOM Event nesnesini alır - yukarıdaki örnekte, event.target aracılığıyla olayı tetikleyen öğeye erişim sağlayabiliriz.

Ayrıca bakınız: Olay Handler’larını Tip Belirleme

Ayrıca bakınız: Olay Handler’larını Tip Belirleme

Metot ve Satır İçi Tespiti

Şablon derleyici, v-on değer dizesinin geçerli bir JavaScript belirleyicisi veya özellik erişim yolu olup olmadığını kontrol ederek metot handler'larını tespit eder. Örneğin, foo, foo.bar ve foo['bar'] metot handler'ı olarak kabul edilirken, foo() ve count++ satır içi handler'lar olarak kabul edilir.

Satır İçi Handler'larda Metot Çağırma

Bir metot adına doğrudan bağlanmak yerine, satır içi bir handler'da metotları çağırabiliriz. Bu, yerel olaya ek olarak metot argümanlarını özel olarak geçirmemizi sağlar:

function say(message) {
  alert(message)
}

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('merhaba')">Merhaba de</button>
<button @click="say('hoşça kal')">Hoşça kal de</button>

Playground'da Deneyin

Playground'da Deneyin

Satır İçi Handler'larda Olay Argümanına Erişim

Bazen bir satır içi handler'da orijinal DOM olayına erişmemiz gerekebilir. Bunu özel $event değişkenini kullanarak bir metoda geçirebilir veya satır içi bir ok fonksiyonu kullanabilirsiniz:

<!-- $event özel değişkenini kullanarak -->
<button @click="warn('Form gönderilemez.', $event)">
  Gönder
</button>

<!-- satır içi ok fonksiyonu kullanarak -->
<button @click="(event) => warn('Form gönderilemez.', event)">
  Gönder
</button>

function warn(message, event) {
  // artık yerel olaya erişimimiz var
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

methods: {
  warn(message, event) {
    // artık yerel olaya erişimimiz var
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

Olay Modifikatörleri

event.preventDefault() veya event.stopPropagation() çağırma ihtiyacı oldukça yaygındır. Bunu metodlar içinde kolaylıkla yapabilsek de, metodların DOM olay detayları ile ilgilenmek yerine tamamen veri mantığına odaklanması daha iyi olacaktır.

Bu sorunu çözmek için Vue, v-on için olay modifikatörleri sağlar. Modifikatörlerin, nokta ile gösterilen yönerge posta ekleri olduğunu hatırlayın.

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- tıklama olayının yayılımı durdurulacak -->
<a @click.stop="doThis"></a>

<!-- gönderim olayı artık sayfayı yenilemeyecek -->
<form @submit.prevent="onSubmit"></form>

<!-- modifikatörler birleştirilebilir -->
<a @click.stop.prevent="doThat"></a>

<!-- sadece modifikatör -->
<form @submit.prevent></form>

<!-- sadece olay.target öğenin kendisi ise handler'ı tetikle -->
<!-- yani bir alt öğeden değil -->
<div @click.self="doThat">...</div>

::: tip Modifikatörler kullanırken sıralama önemlidir çünkü ilgili kod aynı sırada üretilir. Bu nedenle @click.prevent.self kullanmak, tıklamanın varsayılan işlemini öğenin kendisinde ve alt öğelerinde önleyecekken, @click.self.prevent yalnızca tıklamanın varsayılan işlemini öğenin kendisinde önleyecektir. :::

.capture, .once ve .passive modifikatörleri, yerel addEventListener metodunun seçenekleriyle benzerlik gösterir:

<!-- olay dinleyicisini eklerken yakalama modunu kullanın -->
<!-- yani iç öğeyi hedefleyen bir olay, o öğe tarafından işlenmeden -->
<!-- önce burada işlenir -->
<div @click.capture="doThis">...</div>

<!-- tıklama olayı en fazla bir kez tetiklenecek -->
<a @click.once="doThis"></a>

<!-- kaydırma olayının varsayılan davranışı (kaydırma) hemen olacaktır -->
<!-- `onScroll` tamamlanmayı beklemeden               -->
<!-- içeriğinde `event.preventDefault()` varsa       -->
<div @scroll.passive="onScroll">...</div>

.passive modifikatörü genellikle mobil cihazlarda performansı artırmak için dokunmatik olay dinleyicileri ile kullanılır.

::: tip .passive ve .prevent birlikte kullanılmamalıdır çünkü .passive zaten tarayıcıya olayın varsayılan davranışını engellemeyi düşündüğünüzü belirtir ve bunu yaparsanız büyük olasılıkla tarayıcıdan bir uyarı alırsınız. :::

Tuş Modifikatörleri

Klavye olaylarını dinlerken, genellikle belirli tuşları kontrol etmemiz gerekir. Vue, tuş olaylarını dinlerken v-on veya @ için tuş modifikatörleri eklemeye izin verir:

<!-- sadece `key` Enter olduğunda `submit` çağrılır -->
<input @keyup.enter="submit" />

Herhangi bir geçerli tuş adını, KeyboardEvent.key aracılığıyla modifikatörler olarak doğrudan kullanarak kebab-kasa dönüştürebilirsiniz.

<input @keyup.page-down="onPageDown" />

Yukarıdaki örnekte, handler yalnızca $event.key 'PageDown' eşitse çağrılacaktır.

Tuş Takma Adları

Vue, en yaygın olarak kullanılan tuşlar için takma adlar sağlar:

• .enter
• .tab
• .delete (hem "Delete" hem de "Backspace" tuşlarını yakalar)
• .esc
• .space
• .up
• .down
• .left
• .right

Sistem Modifikatör Tuşları

Aşağıdaki modifikatörleri yalnızca ilgili modifikatör tuşuna basıldığında fare veya klavye olay dinleyicilerini tetiklemek için kullanabilirsiniz:

• .ctrl
• .alt
• .shift
• .meta

::: tip Not Macintosh klavyelerinde meta, komut tuşudur (⌘). Windows klavyelerinde meta, Windows tuşudur (⊞). Sun Microsystems klavyelerinde meta, katı bir elmas (◆) olarak işaretlenir. Bazı klavyelerde, özellikle MIT ve Lisp makine klavyeleri ve bunların halefleri, Knight klavyesi gibi, meta "META" olarak etiketlenmiştir. Symbolics klavyelerinde meta "META" veya "Meta" olarak etiketlenmiştir. :::

Örneğin:

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Tıklama -->
<div @click.ctrl="doSomething">Bir şey yap</div>

::: tip Modifikatör tuşlarının normal tuşlardan farklı olduğunu ve keyup olayları ile kullanıldığında, olay yayımlanırken basılmaları gerektiğini unutmayın. Diğer bir deyişle, keyup.ctrl yalnızca ctrl tuşunu basılı tutarken bir tuşu bıraktığınızda tetiklenir. Sadece ctrl tuşunu bıraktığınızda tetiklenmez. :::

.exact Modifikatörü

.exact modifikatörü, bir olayı tetiklemek için gereken sistem modifikatörlerinin tam kombinasyonunu kontrol etmenizi sağlar.

<!-- bu, Alt veya Shift de basılı olduğunda tetiklenecektir -->
<button @click.ctrl="onClick">A</button>

<!-- bu yalnızca Ctrl ve başka hiçbir tuş basılı olmadığında tetiklenecektir -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- bu yalnızca hiçbir sistem modifikatörü basılı değilken tetiklenecektir -->
<button @click.exact="onClick">A</button>

Fare Butonu Modifikatörleri

• .left
• .right
• .middle

Bu modifikatörler, handler'ı belirli bir fare düğmesi tarafından tetiklenen olaylarla kısıtlar.

Ancak, .left, .right ve .middle modifikatör adları tipik sağ el düzenine dayanmaktadır, ancak aslında "ana", "ikincil" ve "yardımcı" işaretleme cihazı olayı tetikleme tetikleyicilerini temsil eder ve fiziksel düğmelere karşılık gelmez. Yani sol eliyle fare düzeninde "ana" düğme fiziksel olarak sağ düğme olabilir ancak .left modifikatör handler'ını tetikler. Veya bir dokunmatik yüzey bir parmakla dokunarak .left handler'ını, iki parmakla dokunarak .right handler'ını ve üç parmakla dokunarak .middle handler'ını tetikleyebilir. Benzer şekilde, diğer cihazlar ve "fare" olaylarını üreten olay kaynakları, "sol" ve "sağ" ile hiç alakası olmayan tetikleme modlarına sahip olabilir.