TypeScript'te Olay Yönetimi

Articles

Bu makale TypeScript'te olay işlemenin nasıl yapıldığını açıklar.

Kod örnekleriyle olay işleme yöntemlerini ve özel olayları öğrenebilirsiniz.

YouTube Video

TypeScript'te Olay Yönetimi

TypeScript'te olay yönetimi, JavaScript'tekiyle aynı şekilde yapılır. Ancak TypeScript tip güvenliğini artırır ve uygun olay tipleri kullanarak olayları güvenli bir şekilde işlemenizi sağlar. Olay yönetiminin temeli, DOM öğelerine olay dinleyicileri eklemek ve kullanıcı işlemlerine yanıt olarak işlemleri gerçekleştirmektir.

Olay Dinleyicileri Ekleme

Olay dinleyicileri, DOM öğelerine addEventListener yöntemi kullanılarak eklenir. Örneğin, bir tıklama olayını yönetmek için şunları yaparsınız:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

Bu kodda, addEventListener belirtilen DOM öğesinde tıklama olayı için bir işlemci kaydetmek amacıyla kullanılır.

TypeScript'te Olay Tipleri

TypeScript'te, olay dinleyicisinde alınan event nesnesine uygun tip otomatik olarak atanır. event nesnesinin tipine bağlı olarak farklı özellikleri vardır, ancak temel tipi Event'tir.

Her olay için uygun tipi kullanarak, geliştirme sırasında TypeScript'in tip güvenliğinden faydalanabilirsiniz.

Ana Olay Tipleri

Event Event, ortak olaylar için temel bir türdür. Form gönderimleri veya sayfa yüklemesinin tamamlanması gibi durumlarda kullanılır.

1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}

Bu kod formun gönderme olayını algılar, varsayılan gönderme işlemini engeller ve bunun yerine konsola bir mesaj yazdırır.

MouseEvent

MouseEvent, tıklama ve fare hareketi gibi fare ile ilgili işlemlere ait bir olay türüdür. Fare koordinatları ve hangi düğmenin tıklandığı hakkında bilgi alabilirsiniz.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}

Bu kod, butona tıklandığında farenin koordinatlarını alır ve konsolda gösterir.

KeyboardEvent KeyboardEvent, klavye girişi ile ilgili bir olay türüdür. Basılan tuşa ve değiştirici tuşların (Shift, Alt, Ctrl, vb.) durumuna erişebilirsiniz.

1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});

Bu kod, basılan tuşun adını görüntüler ve Ctrl tuşu basılıysa, bu bilgiyi de konsola yazdırır.

InputEvent InputEvent, giriş alanlarında yapılan değişikliklerle ilgili bir olay türüdür. Bir metin alanı veya textarea'nın değeri değiştiğinde kullanılır.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}

Bu kod, giriş alanının değeri her değiştiğinde içeriğini konsolda gösterir.

FocusEvent FocusEvent, bir öğe odağı aldığında veya kaybettiğinde meydana gelen bir olay türüdür.

 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}

Bu kod, giriş alanı odaklandığında konsola "Focused" ve odak kaybolduğunda "Blurred" yazdırır.

Özel Olayları Tip Belirtmeyle (Type Assertion) Yönetme

Özel olaylarda veya TypeScript'in tip çıkarımı doğru çalışmadığında, tipi açıkça type assertion ile belirtebilirsiniz.

Örneğin, belirli bir input alanı (HTMLInputElement) için bir olayı yönetmek için tipi şöyle belirtirsiniz:.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}

Bu kod, olay hedefini bir HTMLInputElement olarak ele almak için tip onaylaması kullanır ve değerini konsolda gösterir.

Olay Dinleyicilerini Kaldırma

Olay dinleyicilerini removeEventListener ile kaldırabilirsiniz. Bunun için, başlangıçta eklenen aynı olay işleyicisini (event handler) iletmeniz gerekir.

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}

Bu kod, butona bir tıklama olayı dinleyicisi ekler ve aynı işleyiciyi belirterek daha sonra kaldırır.

Özel Olaylar Oluşturma

TypeScript'te, standart olayların yanı sıra özel olaylar da oluşturabilir ve tetikleyebilirsiniz. Özel bir olay oluşturmak için CustomEvent sınıfını, tetiklemek için ise dispatchEvent metodunu kullanın.

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}

Bu kod, CustomEvent kullanarak özel bir olay oluşturur, onu öğeye gönderir ve ayrıntılarını konsolda gösterir.

Olay Yayılımını (Propagasyon) Kontrol Etme

Bir olay oluştuğunda, varsayılan olarak bubble (üst öğelere doğru yayılır). Bunu önlemek için event.stopPropagation() kullanın. Tarayıcının varsayılan davranışını engellemek için preventDefault() da kullanabilirsiniz.

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}

Bu kod, butona tıklandığında varsayılan işlemi devre dışı bırakır, olayın kabarcıklanmasını (bubbling) durdurur ve özel işlemi gerçekleştirir.

Özet

TypeScript'te olay yönetimi temelde JavaScript ile aynıdır, ancak doğru tip tanımları ile olay nesneleri ve DOM öğeleriyle güvenle ve sağlam bir şekilde çalışabilirsiniz. Olay dinleyicileri ekleyip kaldırarak, olay tiplerini uygulayarak ve tip belirtmeyle daha anlaşılır ve hataya daha az açık bir olay yönetimi sağlayabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

TypeScript'te Shadow DOM TypeScript'te Fetch/XMLHttpRequest