Javascript onclick kullanımı

sezaialkan
Sezai Alkan Frontend Developer

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.

Javascript onclick kullanımı

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.

Javascript onclick kullanımı

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol