Event Binding Nedir?

Herhangi bir durumda otomatik olarak tetiklenen olaylara events deriz. Bu konuyu biraz daha açacak olursam,

ts dosyamızın içerisinde message adında bir property oluşturalım. message property’si için başlangıç değeri verebiliriz. Örneğin;

export class TodoComponent{
message = “merhaba”;
}

Daha sonra bu bilgiyi html sayfasına {{ message }} şeklinde taşıyarak sayfaya bastırabiliriz. Yani component üzerinden html sayfasına bir bilgi akışı söz konusu.

Fakat bu aşamada input’tan girmiş olduğumuz bilgiyi componente taşımak istersek yani, tam tersi bir durum söz konusu olursa ne olmuş olur? Kullanıcı bilgiyi input’a girer ve butona tıkladığı an bu bilgi inputtan component’e taşınır.

Bu aşamada input’tan butona bir bilgi akışı gönderilmelidir. Butona tıklandığı anda bu olay (event) gerçekleşmesi gereklidir. Ya da daha farklı bir senaryoda klavye tuşlarına basıldığı anda tetiklenmesi gerekebilir. Sonuç olarak biz bu olaylara özetle “event” deriz.

Bu event’i çeşitli şekillerde yakalayabiliriz. Butona tıklandığında tetiklenmesini istersek (click) event’i kullanabiliriz mesela.

Bununla alakalı bir örnek göstererek konuyu daha da detaylandırmak isterim:

Örneğin bir yapılacaklar listesi oluşturmak istiyoruz. Kullanıcı bilgiyi girip add butonuna tıkladığında da eklenmek istenen bilginin ekrana geldiğini görmek istiyoruz.

Bunun için öncelikle ts dosyasında Bu işlemi gerçekleştirecek metodu oluşturmamız gereklidir.

Yukarıdaki şekilde metodumuzu oluşturduk. Bu metodda yapmak istenilen işlemi de şöyle özetleyebilirim, inputa bir değer girmedikçe bilgi giriniz diye uyarı verecektir. Bu arada daha önce oluşturulan model adlı class’ının içerisinde items adlı bir liste oluşturulmuştu. Bizde girdiğimiz bilgiyi buraya pushlamak istiyoruz. Bilgiyi girdiğimizde ise click event’i tetiklenecek ve bilgiyi sayfaya ekleyecektir.

Şimdi ise html işlemimizi yapalım:

Yukarı gösterilen kod bloğunda hem click hem de keyup eventleri yer almaktadır. Click eventinin görevini anlatmıştım. İnput içerisinde kullandığım Keyup event’i de herhangi bir tuşa basıldığında çağırılacak ve value bilgisini alıp sayfaya bastıracaktır.

Bunun dışında blur event’i de vardır. Bu event ise kullanıcı buton dışında sayfadaki herhangi bir yere tıkladığında ekleme işlemini gerçekleştirebilir. Fakat tabiki biz bu işlemin butona tıklandığında gerçekleşmesini istediğimiz için bunu kullanmayacağız.

Görüldüğü gibi listemiz böyleyken Kodlama çalış adlı bir bilgi girip add butonuna tıklarsak;

Kodlama çalış adlı bilgimiz de listemize eklenmiş olacaktır.

Bu örnek dışında events konumuzun daha iyi pekişmesi için daha da derinlerine diğer yazılarımda değineceğim. Şimdilik yapısal açıdan iskeletini inceledik ve küçük bir örnekle pekiştirdik beraber.

Sağlıcakla kalın. Tekrar yazılarımda buluşmak üzere.

Keyifli kodlamalar.. 😊