JavaScript'te Event Delegation

Event delegation, olayları daha verimli bir şekilde yönetmek için kullanılan bir tekniktir. Bu yöntem, bir olay dinleyicisinin (event listener) üst bir elementte tanımlanarak birçok alt element için kullanılmasını sağlar. Böylece, her bir alt element için ayrı ayrı dinleyici tanımlamak yerine daha az kaynak kullanılır.

Event Delegation Nasıl Yapılır?

Event delegation uygulamak için aşağıdaki adımları izleyebilirsiniz:

• Üst Elementi Seçin: Olay dinleyicisini eklemek istediğiniz üst elementi seçin.
• Olay Dinleyicisini Ekleyin: Seçilen üst elemente bir olay dinleyicisi ekleyin. Bu, alt elementlerde tetiklenecek olayları dinleyecek.
• Tetikleyiciyi Kontrol Edin: Olay dinleyicisi içinde, olayın hedefinin (event target) hangi alt element olduğunu kontrol edin.
• İşlemi Gerçekleştirin: Uygun alt element üzerinde gerekli işlemi yapın.

Örnek Kod

Aşağıdaki örnek, bir listenin üst elementine tıklama olayı ekleyerek alt elementler üzerinde işlem yapmayı göstermektedir. ```javascript const ul = document.getElementById('myList'); ul.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { alert('List item clicked: ' + event.target.textContent); } }); ``` Bu yöntemle, yalnızca üst elemente bir dinleyici ekleyerek, listenin içindeki her bir öğeye tıklandığında işlem yapabilirsiniz. Bu, performansı artırır ve kodu daha düzenli hale getirir.