avatar
·2 dk okuma
JavaScript Events: Temel Kavramlar ve React İçinde Kullanımı

JavaScript Events: Temel Kavramlar ve React İçinde Kullanımı

JavaScript'de event, kullanıcının web sayfasıyla etkileşimde bulunmasına izin veren eylemlerdir. Örneğin, bir düğmeye tıklama veya bir formu gönderme gibi eylemler, bir event tetikleyebilir. Bu event, web sayfasında bir değişiklik yapmak veya bir işlemi gerçekleştirmek için JavaScript tarafından yakalanabilir.

React, eventleri ele almak için özel bir sözdizimi sunar. JSX içinde, olay adları camelCase şeklinde yazılır ve onlara bir işlev atanır. Bu işlev, olay tetiklendiğinde çağrılacaktır.

Örneğin, aşağıdaki kod, bir düğmeye tıklama olayını ele alır ve handleClick işlevini çağırır:

import React from 'react';

function MyComponent() {
  function handleClick() {
    console.log('Button clicked!');
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

Bu kodu daha kısa yazabiliriz:

import React from 'react';

function MyComponent() {
  return (
    <button onClick={()=> console.log('Button clicked!')}>Click me</button>
  );
}

React'te, bir olayın yayılması (propagation) engellenebilir veya durdurulabilir. Örneğin, bir ana bileşenin bir alt bileşendeki bir olayı durdurmasına izin vermek için, alt bileşen, olay nesnesinin stopPropagation() yöntemini çağırabilir.

React ayrıca, bir olayın varsayılan davranışını engelleme veya değiştirme yeteneği de sunar. Örneğin, bir bağlantıya tıklama olayı, sayfanın yeniden yüklenmesine neden olabilir. Bu davranış, event.preventDefault() yöntemi kullanılarak engellenebilir.

React'te olayların kullanımı, Vue veya Angular gibi diğer çerçevelerden biraz farklıdır. React, olayların "syntax sugar" sağlar, ancak olay yönetimi genellikle diğer çerçevelere göre daha doğrudan ve JavaScript'e daha yakındır.

Özetlemek gerekirse, JavaScript'te eventler, web sayfalarında etkileşimli işlemleri mümkün kılan önemli bir kavramdır. React, JSX sözdizimi ile eventleri ele alır ve olayların yayılmasını durdurma veya varsayılan davranışı engelleme gibi özellikleri sağlar. Bu özellikler, React'teki olay yönetimini diğer çerçevelerden farklı kılar.