Javascript onClick ve onChange Olayları nedir ?

onClick

onClick olayı web sayfasındaki DOM elementler üzerine tıklandığında zaman bir javascript fonksiyonunun tetiklenmesini sağlar . Yani web sayfanda hazırlamış olduğunuz bir javascript fonksiyonunu bir dom element e tıklanarak  çalıştırılmasını isterseniz yapmanız gereken onclick fonksiyonunu kullanmak olmalıdır. DOM elementler sayfanızdaki div , input , select , button vb gibi herhangi bir şey olabilir. Şimdi aşağıdaki örneği inceleyelim .

<h3 onclick="yaziDegistir(this)">Bu yazının üzerine tıklayın!</h3>

<script>
function yaziDegistir(id) {
  id.innerHTML = "Ooops buraya tıkladın!";
}
</script>

Yukarıdaki örnekte olayı bir h3 tag’ına ekledik . Tag üzerine tıklandığı zaman olay yaziDegistir fonksiyonunu çalıştırıyor. Sizler örnekleri istediğiniz gibi geliştirebilirsiniz.

onChange

onChange olayı ise bir element’in atanmış değeri değiştiği zaman tetiklenmektedir . Bunu aşağıdaki şekilde bir örnekle açıklayabiliriz.

<select id="selectBox" onchange="myFunction()">
  <option value="Elma">Elma
  <option value="Armut">Armut
  <option value="Çilek">Çilek
  <option value="Muz">Muz
</select>

<p>Yukarıdaki seçeneceklerden birini seçtiğinizde , seçmiş olduğun seçeneğin değerini göreceksiniz.</p>

<p id="demoTextBox"></p>

<script>
function myFunction() {
  var x = document.getElementById("selectBox").value;
  document.getElementById("demoTextBox").innerHTML = "Seçiminiz: " + x;
}
</script>

onChange oninput olayına çok benzemektedir . Arada ufak bir farklılık bulunmaktadır . onInput olayı bir elemanın içerisindeki değer değiştikten hemen sonra gerçekleşmektedir. Ancak onChange olayı ise eleman odağı kaybettiğinde meydana gelmesidir.  Bir diğer fark ise onChange olayı select element’i üzerinde de çalışabilmektedir.

• Javascript OnFocus ve OnBlur Olayları nedir ?
• Javascript Dönüşümler ( toString ve Number Kullanımı )

Konu çok basit olduğu için ve biraz da pratik yaptığınızı varsayarsak javascript onclick kullanımı ve javascript onchange kullanımı konularına artık hakim olduğunuzu düşünebiliriz. Ayrıca resmi sitelerden de olayları incelemenizde fayda bu size daha geniş kapsamlı kullanımları anlamanızı sağlayacaktır.

• Javascript resmi internet sitesi üzerinden farklı bir çok javascript örnekleri’ne de erişebilirsiniz .

Zaman içerisinde bu javascript olayları hakkında farklı örnekler ve farklı olayları ekleyeceğim.