Javascript Events Kullanımı

nhtctn nhtctn

JavaScript’in en büyük amacı, sayfamızda bir olay gerçekleştiğinde istediğimiz işlemleri gerçekleştirebilmemizi sağlamaktır. Bunu sağlamak için sayfada gerçekleşebilecek olaylara birer isim verilmiştir. İstenilen olay karşısında bir javascript fonksiyonunu çağırıp, ilgili işlemleri yaptırabiliriz.

addEventListener()

HTML dökümanı üzerinde belirtilen elementi dinleyip, istenilen olay gerçekleştiğinde bir metod çalıştırmak için kullanılır.

Aslında özetle DOM nesnelerine olay atamak için kullanılır.

element.addEventListener(olay,fonksiyon,useCapture);

element: İşlem yapılacak olan elementi belirtir. Yani olay yakalayıcı eklenecek olan elemanı. Örneğin; id değeri baslik olan veya class değeri icerik olan eleman gibi

olay: Hangi olayda işlemin gerçekleştirileceğini belirler. Örneğin; tıklama, fare ile üzerine gelme gibi.

fonksiyon :Yapılacak olan işlemi belirtir. Bu kısma daha önce tanımladığımız bir fonksiyonu yazabileceğimiz gibi istediğimiz işlemleri yapabileceğimiz bir fonksiyon ifadesi de yazabiliriz.

useCapture: Olayın bubbling (kabarcıklanma) veya capturing (yakalama) olduğunu belirten parametredir. Opsiyoneldir yani zorunlu değildir. Boolean (true/false) bir değer alır. Hiçbir değer yazılmazsa false değerini alır. Eğer false ise olayın bubbling (kabarcıklanma), true ise olayın capturing (yakalama) olduğunu belirtir. 

Aşağıdaki basit bir kullanım gösterilmiştir. Bu kullanım fonksiyon bir kez kullanılacaksa yazılabilir.

const btn = document.querySelector('#btnDeleteAll');

btn.addEventListener('click',function(){
    console.log('btn clicked');
});

Fonksiyon birden fazla yerde kullanılacaksa aşağıdaki gibi fonksiyon yazılır. Ardından addEventListener’a parametre olarak verilir.

const btn = document.querySelector('#btnDeleteAll');
const btn2 = document.querySelector('#btnAddNewTask');

btn.addEventListener('click', btnClick);
btn.addEventListener('click',btnClick2);
btn2.addEventListener('click',btnClick);

function btnClick(){
    console.log('btn Cliked');
}

function btnClick2(){
    console.log('btn 2 Cliked');
}

Bir olaya event ekleme ve eklediğimiz bir eventin özelliklerini nasıl ulaşabileceğimizi göreceğiz.

Kurucu

Event: Bir olay nesnesi oluşturur.

Özellikler

event.type: Tetiklendiğinde , olay türünün adını verir.

event.target: Olayı tetikleyen öğe döndürülür.

event.target.id : Olayı tetikleyen öğenin id’si döndürülür.

event.target.classList :Olayı tetikleyen öğenin sınıf listesi döndürülür.

Metotdlar

stopProagation() : Dom ile birlikte olayların yayılmasını durdurur.


preventDefault() : Oluşan eventin işlevini geçersiz kılar.

Şu durumlarda yararlı olabilir;

  • Bir gönder düğmesine tıklayarak, form gönderilmesini önlemek
  • Bir bağlantıya tıklamak, bağlantıyı url’yi takip etmesini önlemek
<a id="test" href="https://www.cetinyazilim.com/"> 

cetinyazilim.com</a>
 var x = document.getElementById("test");

 x.addEventListener("click", function(event){

 event.preventDefault()
  
});

Mouse Events

Javascripte birçok tetikleyici olay vardır şimdi bunlardan fare(mouse) ile gerçekleşebilen olaylara göz atalım.

click, dblclick, mousedown, mouseup, mouseenter, mouseleave, mouseover, mouseout, mousemove başlıca mouse olaylarımızdır.

const btn = document.querySelector('#btnDeleteAll');

const ul = document.querySelector('#task-list');

function eventHandler(e){
    console.log(`${e.type} tıklandı`);
}

click: Elemana tıklandığı zaman çalışacak olan olaydır.

btn.addEventListener('click', eventHandler);
ul.addEventListener('click',eventHandler);

dlbclick: Elemana çift tıklandığı zaman çalışacak olan olaydır.

 btn.addEventListener('dblclick',eventHandler);
 ul.addEventListener('dblclick',eventHandler);

mousedown: Fare sol tuşunun eleman üzerindeyken basılması olayıdır. Tuş aşağıya indiği anda ilgili fonksiyon çalışır.

mouseup: Fare sol tuşunun eleman üzerindeyken basılıp bırakılması olayıdır. Fare tuşu aşağıdayken çalışmaz, tuş bırakıldığında çalışır.

//mousedown
btn.addEventListener('mousedown',eventHandler);

//mouse up
btn.addEventListener('mouseup',eventHandler);

mouseenter: Belirlediğimiz bir element sınırları içerisine girdiğinde olay tetiklenir.

mouseleave: Belirlediğimiz bir element sınırları içerisinden çıktığımızda olay tetiklenir.

//mouseenter
ul.addEventListener('mouseenter',eventHandler);

//mouseleave
ul.addEventListener('mouseleave',eventHandler);

mouseover: Belirlediğimiz bir element sınırları içerisine girdiğinde olay tetiklenir. Eğer Html element başka bir elementin içindeyse veya içerisinde başka elementler varsa da mouseover gerçekleşir. Mouse ilgili elementin üzerinde gezdikçe mouseover sadece bir defa gerçekleşir, mousemove her seferinde gerçekleşir.

mouseout: Belirlediğimiz bir element sınırları içerisinden çıktığımızda olay tetiklenir. Eğer html element başka bir element içeriyorsa mouseleave içerilen elementin üzerine geldiğinde gerçekleşmez, mouseout gerçekleşir.

//mouseover
ul.addEventListener('mouseover',eventHandler);

//mouseout
ul.addEventListener('mouseout',eventHandler);

mousemove örneği

const h5 = document.querySelector('h5');

ul.addEventListener('mousemove',eventHandler);

function eventHandler(event){
    console.log(`event type : ${event.type}`);

    h5.textContent=`Mouse X : ${event.offsetX}
    Mouse Y : ${event.offsetY}`;
}

Keyboard Events

Başlıca klavye olayları aşağıdaki gibidir;

keydown, keyup, keypress, focus, blur, cut, paste, select, submit, change, keyCode …

const input =document.querySelector('#txtTaskName');

const form = document.querySelector('form');

const select = document.querySelector('#select');

function eventHandler(e){

        console.log('event type : ' + e.type);
        // console.log('key code: ' + e.keyCode);
         console.log('value : ' + e.target.value);
    
        //e.target.style.backgroundColor = "tomato";
       // e.preventDefault();
}

keydown: Kullanıcı bir tuşa bastığında gerçekleşir.

input.addEventListener('keydown',eventHandler);

keyup: Kullanıcı bastığı tuştan elini kaldırdığı zaman çalışır.

input.addEventListener('keyup',eventHandler);

keypress: Keydown ile aynı göre görmektedir. Farkı varsa ilerde ekleme yapılacaktır.

input.addEventListener('keypress',eventHandler);

focus: Adı üstünde belirtilen elemente odaklandığı zaman gerçekleşir.

input.addEventListener('focus',eventHandler);

blur: Focus olayının tam tersi focus olduğumuz elementle işimiz bittiği zaman gerçekleşir.

input.addEventListener('blur',eventHandler);

cut:Kesme işlemi yaptığımız zaman gerçekleşecek olan olaydır.

input.addEventListener('cut',eventHandler);

paste: Yapıştırma işlemi yaptığımız zaman gerçekleşecek olan olaydır.

input.addEventListener('paste',eventHandler);

select: Bir seçim işlemi yaptığımız zaman çalışacak olan olaydır.

input.addEventListener('select',eventHandler);

submit: Bir submit etme işleminde çalışacak olan olaydır.

form.addEventListener('submit',eventHandler);

change: Adı üstünde bir değişim olduğu zaman gerçekleşir.

select.addEventListener('change',eventHandler);

keyCode: Klavyede herhangi bir tuşla işlem yapmak için kullanılır.

KeyCode Örneği

ASCII tablosuna göre belirlediğimiz bir tuşa (32=boşluk tuşu) basıldığında olay gerçekleşir.

function eventHandler(e){

    if(e.keyCode==32)
    {
        console.log('event type : ' + e.type);
       
    }
}

 Event Bubbling & Capturing Olayları

Bu yazımda JavaScript’te bulunan Bubbling ve Capturing özelliklerinden bahsedeceğim. Öncelikle bu kavramların Türkçe karşılıklarını vererek işe başlayalım; Bubble kabarcık, bubbling ise kabarcıklanma anlamlarına geliyor. Capturing ise yakalamak demek.  Bu kavramları açıkladıktan sonra bubbling ve capturing özelliklerinin kullanıldığı addEventListener konusuna geçiş yapabiliriz. 

element.addEventListener(olay,fonksiyon,useCapture);
//Şimdiye kadar olay ve fonksiyon kullandık sıra useCapture'yi kullanmada

useCapture: Olayın bubbling (kabarcıklanma) veya capturing (yakalama) olduğunu belirten parametredir. Opsiyoneldir yani zorunlu değildir. Boolean (true/false) bir değer alır. Hiçbir değer yazılmazsa false değerini alır. Eğer false ise olayın bubbling (kabarcıklanma), true ise olayın capturing (yakalama) olduğunu belirtir. 

İşte bütün bu karışıklık da zaten bu useCapture parametresinden kaynaklanmaktadır. Isınma turunu atlattıysak hızımızı biraz daha arttıralım ve bu karmaşıklığın neden kaynaklandığını bir örnek üzerinden açıklayalım.

const form = document.querySelector('form');

const cardBody = document.querySelector('.card-body');

const card = document.querySelector('.card');

const container = document.querySelector('.container');

Event Bubbling: İçten dışa bir aktarım söz konusu

form.addEventListener('click',function(e){
    console.log('form clicked');
    //e.stopPropagation();
});

cardBody.addEventListener('click',function(e){
    console.log('card body clicked');
   // e.stopPropagation();
});

card.addEventListener('click',function(e){
    console.log('card clicked');
   // e.stopPropagation();
});

container.addEventListener('click',function(e){
    console.log('container clicked');
    //e.stopPropagation();
});

form kısmına tıkladığımda içten dışa bir aktarım oldu…

Event Capturing : Dıştan içer doğru bir durum söz konusu

Burada addEventListennere 3. parametreyi verdik yani true yaptık. True ise olayın capturing (yakalama) olduğunu belirtir. 

form.addEventListener('click',function(e){
    console.log('form clicked');
    
},true);

cardBody.addEventListener('click',function(e){
    console.log('card body clicked');
    
},true);

card.addEventListener('click',function(e){
    console.log('card clicked');
    
},true);

container.addEventListener('click',function(e){
    console.log('container clicked');
    
},true);

form kısmını tıkladığımda dıştan içe bir aktarım oldu.

e.stopPropagation(); ile içten dışa ya da dıştan içe doğru aktarımı iptal ettirebiliriz.

 

Yorum yazın

BENZER YAZILAR