javaScript TARAYICI OLAYLARINA (EVENTS) GİRİŞ

Ziyaretçilerin eylemlerine ve komut dosyalarının iç iletişimine tepki vermek için olaylar vardır. Olay, tarayıcıdan bir şey olduğuna dair bir işarettir. Çok çeşitli olaylar var. En kullanışlı DOM etkinliklerinin bir listesi şu şekildedir:

Mouse events:

• click : Eleman üzerine sol fare tuşu ile eleman tıklandığında gerçekleşir.
• contextmenu :Bir öğeyi sağ tıklattığınızda gerçekleşir.
• mouseover :Bir öğe farenin üzerine getirildiğinde oluşur.
• mousedown/ mouseup :Mouse düğmesine basıldığında / serbest bırakıldığı zaman.
• mousemove :Mouse hareket ettirilirken.
• wheel :Fare tekerleği bir öğenin üzerine yukarı veya aşağı yuvarlandığında gerçekleşir.

Form öğesi etkinlikleri:

• submit : Ziyaretçi ne zaman gönderirse <form>
• focus : ziyaretçi bir öğeye odaklandığında, örn : <input>.

Klavye olayları:

• keydown ve keyup :ziyaretçinin düğmeye basıp bırakması durumunda.

Belge olayları :

• DOMContentLoaded : HTML yüklenir ve işlendiğinde, DOM belgesi tamamen oluşturulur ve kullanılabilir.

CSS etkinlikleri:

• transitionend : CSS animasyonu tamamlandığında.

Daha bahsetmediğimiz bir çok event (olay) vardır.

Olay işleyicileri

---

Olaylarda tepki vermek için, bir olay oluşturduğunda çalışan bir işleyici atayabiliriz. İşleyiciler, kullanıcı eylemleri durumunda JavaScript kodunu çalıştırmanın bir yoludur. Bir işleyici atamak için birkaç yol vardır. En basitinden başlayarak görelim.

HTML-attribute :

Örneğin, "input" düğmesine bir click olayı eklemek için, bunun gibi bir onclick işleyicisi atayabilirsiniz.

<input value="Tıkla" onclick="alert('Click!')" type="button">

Düğmeye tıkladığınızda, onclick özniteliğinde belirtilen kod çalıştırıldı. Onclick özniteliğinin içeriğinin tek tırnak işareti kullandığına dikkat edin, çünkü öznitelik kendisi çift tırnaktır. Yeni webyazılımcılar için ortak bir yanlışlık, kodun nitelikte olduğunu unutturmasıdır. onclick="alert("Tıkla")" Şeklinde bir girdi, içinde çift tırnak işaretleri çalışmaz. Gerçekten çift tırnak kullanmanız gerekiyorsa bunu çift tırnak işareti (Ascii karakter) ile değiştirerek kullanabilirsiniz.

Bir HTML niteliği çok sayıda javaScript kodu yazmak için uygun bir yer olmadığından, bir JavaScript fonksiyonu oluşturup oradan çağıralım.

Örnekte bir tıklama fonksiyonu "mesaj()" çalıştırır.

HTML :

<input type="button" onclick="mesaj()" value="Tıkla">

javascript :

function mesaj(){

alert(javascript);

}

Hatırladığımız gibi, HTML etiketi özniteliği büyük / küçük harfe duyarlı değildir, bu nedenle ONCLICK ,onClick veya onCLICK gibi yazım şekillerinde çalışacaktır ... Fakat kural olarak nitelikler küçük harflerle yazılır: onclick

DOM Nesnesi Özelliklerini Kullanma

---

DOM özelliğini kullanarak Bir işleyici atayabiliriz on<event>>

Örnek : elem.onclick:

HTML :

<input id="elem" type="button" value="Tıkla">

javascript :

elem.onclick = function() {

    alert('merhaba dünya!');
  
  };

İşleyici bir HTML özniteliği kullanarak atandıysa tarayıcı onu okur, öznitelik içeriğinden yeni bir fonksiyon oluşturur ve DOM özelliğine yazar.

Bu yol aslında bir önceki ile aynı.

İşleyici her zaman DOM özelliğinde bulunur: HTML özniteliği, onu başlatmanın yollarından yalnızca biridir.

Aşağıdaki iki kod parçası aynı şekilde çalışır:

1. Yalnızca HTML :

<input type="button" onclick="alert('javascript')" 

value="Button">

2. HTML + JS

<input type="button" id="button" value="Button">

button.onclick = function() {

alert('javascript');

};

Tek bir onclick özellik olduğu için, birden fazla olay işleyicisi atayamaz.

Aşağıdaki örnekte JavaScript ile bir işleyici eklendiğinde var olan işleyicinin üzerine yazılır:

HTML :

<input type="button" id="elem" onclick="alert('Before')" 

value="Tıkla">

javaScript :

elem.onclick = function() { // var olan işleyicinin üzerine yazar

    alert('After'); // yalnızca bu veri gösterilir.
  };

Bu arada, bir işleyici için varolan bir fonksiyon atayabilirsiniz:

 function mer() {
 
  alert('Merhaba Dünya');
}

elem.onclick = mer;

Bir İşleyici silmek için elem.onclick = null atayarak her zaman silinebilir.

Elemana erişme

---

Olay işleyicisinde, this geçerli öğeye, yani üzerinde çalıştığı öğeye atıfta bulunur.

Özellikleri almak veya bir unsuru değiştirmek için bunu kullanabilirsiniz.

Aşağıdaki kod button içeriğini görüntüler this.innerHTML:

 
 <button onclick="alert(this.innerHTML)">Tıkla</button>

 

Olası Hatalar

---

Sadece olaylarla çalışmaya başlıyorsanız, aşağıdaki özelliklere dikkat edin.

Fonksiyon Yaz () ; bu şekilde değil, Yaz; olarak atanmalıdır.

 // Doğru
 
button.onclick = Yaz;

// Yanlış

button.onclick = Yaz();

Parantez eklersek, Yaz() - fonksiyon, websayfa yüklenince direk çalışır, böylece son koddaki onclick tanımsız olur(fonksiyon hiçbir şey döndürmez). Bu işe yaramaz.

Aşağıdaki örnekte inline (satır içi) işaretlemede sadece parantezler gerekiyor:

<input type="button" id="button" onclick="Yaz()">

Bu farkı açıklamak basittir. Bir öznitelikten bir işleyici oluşturduğunuzda, tarayıcı içeriğinde otomatik olarak bir fonksiyon oluşturur.

Yani son örnek aslında aynıdır:

button.onclick = function() {

  Yaz(); // özellik içeriği
};

Not :Direk javaScript kodları değil fonksiyonları kullanın. elem.onclick = "alert(1)" de işe yarar. Yani uyumluluk nedenleriyle çalışır, ancak kullanılması şiddetle tavsiye edilmez. Fonksiyon İfadelerini destekleyen bir dilde bir javaScript kodlarını direk olarak yazmak uyumluluk nedenleriyle çalışır, ama kullanmayın.

Olay işleyicilerde setAttribute methodu kullanırken dikkatli olun.

Böyle bir çağrı çalışmaz.

document.body.setAttribute('onclick', yaz);

Yukarıda ki kod çalışmaz. İnline olarak onclick niteliğine direk fonksiyon içeriğini yani javascript kodlarını yazarak çalışmayacaktır.

document.body.setAttribute('onclick', yaz());

Parantez eklersek, Yaz() - fonksiyonun çalıştırılmasının sonucu olur, böylece son koddaki onclick tanımsız olur. Sayfa yüklenince fonksiyon direk çalışır.

document.body.setAttribute('onclick', 'yaz()');

Tırnakları unutmazsak kodumuz çalışaçaktır.

javascript'de harf duyarlılığı vardır.

Büyük / küçük harf duyarlı olduğundan elem.onclick, bir olay işleyici çalışacaktır. elem.ONCLICK yazarsak çalışmaz.

addEventListener ve removeEventListener

---

İşleyicileri atamak için belirtilen yöntemlerin temel sorunu - bir olaya birden fazla işleyici atayamayız.

Örneğin, kodumuzun bir kısmı tıklamayla ilgili bir düğmeyi vurgulamak isterken, bir başka kodumuzda bir mesaj göstermek istiyor olabilir.

Bunun için iki olay işleyicisi atamak istiyoruz. Ancak varolan bir DOM özelliği yeni bir DOM özelliğinin üzerine yazılır:

Olay işleyici :Bir olay meydana geldiğinde yürütülen kod.

input.onclick = function() { alert(1); }
// ...
input.onclick = function() { alert(2); } // önceki  üzerine yazılır.

Web standardı geliştiricileri uzun zaman önce ve özel methodlar addEventListener ve removeEventListener kullanarak işleyicileri yönetmenin alternatif bir yol önerdi.

AddEventListener() methodu

---

AddEventListener() yöntemi, belirtilen öğeye bir olay işleyicisi ekler.

AddEventListener() yöntemi, varolan olay işleyicilerinin üzerine yazılmadan bir öğeye bir olay işleyicisi ekler.

Bir öğeye birçok olay işleyicisi ekleyebilirsiniz.

Aynı türdeki birçok olay işleyicisini bir öğeye ekleyebilirsiniz, yani iki Click olayı gibi.

Olay dinleyicileri sadece HTML öğelerini değil, herhangi bir DOM nesnesine ekleyebilirsiniz. Yani pencere nesnesi gibi...

AddEventListener() yöntemi, olayın bubbling (kabarcıklanma) nasıl tepki verdiğini denetlemeyi kolaylaştırır.

AddEventListener() yöntemini kullanırken, JavaScript daha iyi okunabilirlik sağlamak için HTML biçimlendirmesinden ayrılır ve HTML biçimlendirmesini kontrol etmediğinizde bile olay dinleyicileri eklemenize izin verir.

RemoveEventListener() yöntemini kullanarak bir olay dinleyicisini kolayca silebilirsiniz.

SÖZDİZİMİ :

element.addEventListener(event, function);

Event :Gereklidir. Olayın adını belirten bir String. ( click veya mousedown gibi).

function :Gereklidir. Olay oluştuğunda çalışacak fonksiyon belirtir.

useCapture :İsteğe bağlı. Olayın, capturing (yakalama) veya bubbling (kabarcıklanma) aşamasında yürütülüp yürütülmeyeceğini belirten bir Boolean değeri. Olası değerler:

• true : Olay işleyicisi, capturing(yakalama) aşamasında çalıştırılır.
• false : Varsayılan olarak çalıştırılır. Olay işleyici bubbling (kabarcıklanma) aşamasında çalıştırılır.

Not :Olay için "on" önekini kullanmadığınızı unutmayın; "onclick" yerine "click" i kullanın.

Tarayıcı Desteği

---

Not : addEventListener() yöntemi, Internet Explorer 8 ve önceki sürümleri ile Opera 6.0 ve önceki sürümlerinde desteklenmez. Bununla birlikte, bu belirli tarayıcı sürümleri için olay işleyicileri eklemek için attachEvent() yöntemini kullanabilirsiniz.

Örnek :

Kullanıcı bir butona tıkladığında "Merhaba Dünya!" Uyarısı ver .

HTML :

<button id="test">Tıkla</button>

javaScript :

document.querySelector("#test").addEventListener("click", 

function(){

    alert("merhaba dünya!");
  
});

Harici bir "adlandırılmış" fonksiyonada başvurabilirsiniz:

element.addEventListener("click", myFunction);

function myFunction() {

    alert ("Hello World!");
  
}

AddEventListener() yöntemi, varolan olayların üzerine yazılmadan aynı öğeye birçok olay eklemenize izin verir:

HTML :

<button id="test">Tıkla</button>

javaScript :

var x = document.getElementById("test");

x.addEventListener("click", Fonksiyon);

x.addEventListener("click", baskaFonksiyon);

function Fonksiyon() {

    alert ("Merhaba Dünya!");
  
}

function baskaFonksiyon() {

    alert ("Bu fonksiyonda çalıştı!");
  
}

Aynı öğeye farklı türdeki etkinlikler ekleyebilirsiniz:

element.addEventListener("mouseover", bir_fonksiyon);

element.addEventListener("click", iki_fonksiyon);

element.addEventListener("mouseout", baska_fonksiyon);

Pencere nesnesine bir Olay İşleyicisi Ekleme

---

AddEventListener() yöntemi, HTML öğeleri, HTML belgesi, pencere nesnesi veya olayları destekleyen diğer nesneler gibi xmlHttpRequest nesnesi gibi herhangi bir HTML DOM nesnesine olay dinleyicileri eklemenize izin verir.

Bir kullanıcı pencereyi yeniden boyutlandırdığında bir olay dinleyicisi ekleyin:

HTML :

<p id="test"></p>

javaScript :

window.addEventListener("resize", function(){

  document.getElementById("test").innerHTML = 
  
  Math.random();
  
});

Event Bubbling (kabarcıklanma) or Event Capturing (yakalama)?

---

HTML DOM'da kabarcıklanma ve yakalama işlemlerinde iki tür olay yayılımı vardır.

Olay yayılımı, bir olay oluştuğunda öğe sırasını tanımlamanın bir yoludur. Bir <div> öğesinde bir <p> öğesi varsa ve kullanıcı <p> öğesine tıklarsa, hangi öğenin "tıklama" olayının öncelikle ele alınması gerekir?

Kabarcıklanma sırasında iç öğenin olayı önce işlenir ve sonra dış öğe işlenir: <p> öğesinin tıklama olayı önce, daha sonra da <div> öğesinin tıklama olayıyla işlenir.

Dış öğenin yakalanmasında öncelikle öğe olayı ve ardından iç kısım işlenir: < div> öğesinin tıklama olayı öncelikle, daha sonra <p> öğesinin tıklama olayı ele alınır.

AddEventListener() yöntemi ile useCapture parametresini kullanarak yayılım türünü belirleyebilirsiniz:

addEventListener(event, function, useCapture);

Varsayılan değer, Bubbling (kabarcıklanma) yayılımını kullanacak false'dur, değer true olarak ayarlandığında, olay Capturing (yakalayan) yayılımı kullanır.

Örnek :

document.getElementById("myp").addEventListener("click", 

myFunction, true);

document.getElementById("myDiv").addEventListener("click", 

myFunction, true);

HTML DOM removeEventListener () Methodu

---

RemoveEventListener () yöntemi addEventListener() yöntemi ile eklenmiş bir olay işleyicisini siler.

Not : Olay işleyicilerini silmek için, addEventListener() methodu ile belirtilen harici bir fonksiyon olmalıdır.

Anonim işlevler, örneğin "element.removeEventListener("event", function(){ myScript });" çalışmayacak.

SÖZDİZİMİ :

element.removeEventListener(event, function, useCapture)

event : Gereklidir. Silinecek etkinliğin adını belirten bir String. (click veya mousedown gibi).

function : Gereklidir. Silinecek fonksiyonu belirtir.

useCapture : İsteğe bağlı. Olay işleyicisini kaldırmak için olay aşamasını belirten bir Boolean değeri. Olası değerler:

• true : Olay işleyicisini Capturing (yakalama) aşamasında siler.
• false : Varsayılan. Olay işleyicisini Bubbling (kabarcıklanma) aşamasında siler.

Tarayıcı Desteği

Not: Internet Explorer 8 ve önceki sürümleri ile Opera 6.0 ve önceki sürümlerinde removeEventListener()yöntemi desteklenmez. Bununla birlikte, bu belirli tarayıcı sürümleri için, attachEvent() yöntemiyle eklenmiş olan olay işleyicilerini kaldırmak için detachEvent() yöntemini kullanabilirsiniz.

Örnek :

AddEventListener() yöntemiyle eklenmiş bir click olayını kaldırın:

// <DIV> Elementi için  olay işleyicisi ekleyin

document.getElementById("myDIV").addEventListener("click", 

myFunction);

// <DIV> Elementi için  olay işleyicisi silin

document.getElementById("myDIV").removeEventListener("click", 

myFunction);

34

Gönder