Javascript onclick kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #onclick

Javascript onclick kullanımında bir html elemanı veya nesnesinde click olayını dinlemektedir. Html elemanına click olayı sağlandığında bir fonksiyon çağırabilir veya tek satırlık bir komut çalıştırabilmekteyiz.

Kullanıcı : onclick=""

En basitinden bir h1 etiketine click olayını dinleyebiliriz.

<h1 onclick="alert('Bana Tıkladı')">Kod Hocası</h1>

Yukarıdaki örnekte h1 etiketimize tıklandığında kullanıcıya Bana Tıklandı diye uyarı verecektir. Bu işlemde javascript kodlarımı script etiketleri arasında yazmamız gerekmemektedir.

Eğer onclick olayında bir fonskiyonu tetiklemek ister isek onclick içerisinde fonksiyonu çağırmamız yeterlidir.

<button onclick="simpleFunc()">Kod Hocasi</button>

function simpleFunc(){
 console.log("Butona Tıklandı");
}

Yukarıdaki örnek üzerine butona click işlemi uygulandığında simpleFunc() fonksiyonu devre girecek ve içerisinde komutlar çalışacaktır. Bunun soncunda console çıktımız aşağıdaki gibi olacaktır.

onclick işlemi ile bir fonksiyon çağırırken bu fonksiyona parametre gönderebilir ve en güzel olanı ise this anahtar kelime ile tıklanan elemanın özelliğini fonksiyona gönderebilmekteyiz.

<p onclick="wScreen(this)">Paragraf İçeriği</p>

function wScreen(e){
 console.log(e.innerHTML);
}

Yukarıdaki örnekte görüldüğü gibi fonksiyonumuzu onclick ile tetikletirken html elemanının özelliklerini this ile fonksiyon içerisine gönderebilmekteyiz.

Yukarıdaki örneğin console çıktısı aşağıdaki gibidir.