Olay işleme, JavaScript'te önemli bir kavramdır. Etkinlikler, çekici kullanıcı arabirimleri oluşturmanıza izin vererek HTML sayfalarının dinamik ve etkileşimli olmasını sağlar. DOM'da bir olay meydana geldiğinde JavaScript'i çalıştırmak için kod yazabilirsiniz.
Olay, kullanıcı bir HTML öğesini tıkladığında, sayfa yüklendiğinde veya bir giriş alanının değeri değiştiğinde olabilir. Bir olay meydana geldiğinde HTML yapısını değiştiren kod yazabilirsiniz. Kodunuza olay dinleyicileri ekleyebileceğiniz üç farklı yolu öğrenin.
1. addEventListener Yöntemi
addEventListener yöntemi popüler yöntemlerden biridir. olay dinleyicisi yöntemleri. Üç parametresi vardır:
- Olayı temsil eden bir nesne.
- Bunu işlemek için bir işlev.
- Olayın DOM boyunca nasıl yayıldığını açıklayan isteğe bağlı bir boole, useCapture.
Olay, bir hedef öğe üzerinde belirtilen herhangi bir DOM olayı olabilir. Bir olay meydana geldiğinde bu olaya yanıt verecek bir işlev kurulur.
İşlev anonim veya adlandırılmış bir işlev olabilir. Popüler hedefler, bir öğeyi, onun alt öğelerini, bir belgeyi ve bir olayı destekleyen bir pencereyi içerir.
addEventListener(), JavaScript'te olay dinleyicilerini yönetmek için önerilen bir yöntemdir. Yalnızca HTML öğelerinde değil, herhangi bir olay hedefinde çalışır ve birden çok olay işleyicisini destekler.
DOM'da bazı kodlar çalıştırmak isteyebilirsiniz. Bir kullanıcı düğmeyi tıklattığında metin yazdırabilir, hesaplamalar yapabilir veya bir görüntü görüntüleyebilirsiniz.
Aşağıdaki kod ile örneklendirelim:
html>
<html>
<vücut>
<h1>İşlevlerle birlikte addEventListener Yöntemih1>
<düğmeİD="Btn'im">Buraya tıklayındüğme>
<PİD="demo">P>
vücut>
html>Ardından, düğmeyi kullanarak olay dinleyicisini ekleyin.
sabit eleman = belge.getElementById("Btn'im");
eleman.addEventListener("tıklamak", İşlevim1);
işlevbenimFonksiyonum1() {
belge.getElementById("demo").innerHTML += "İşlem yürütüldü! "
}
Düğmeye tıkladığınızda, aşağıda gösterildiği gibi ekrana 'Function Executed' yazısı yazdırılır.
2. Olayları addEventListener'a Yetki Verme
JavaScript'te bir olayı devretmek, birden çok olayı işlemek için kullanılan bir kalıptır. Her öğeye bir olay dinleyicisi eklemek yerine, olay dinleyicisini yalnızca bir ata öğeye eklersiniz. Etkinliği tetikleyen öğeye şuradan erişebilirsiniz: .hedef olay nesnesinin özelliği.
Bu, hedeflediğiniz tüm öğelerin ortak davranışa sahip olmasını sağlar. Bu olmadan, her birine manuel olarak bir olay dinleyicisi eklemeniz gerekir.
İşte etkinlik delegasyonuna bir örnek:
html>
<html>
<vücut>
<h1> Düğmelerde Olay Delegasyonuh1>
<div>
<düğme>Buton 1düğme>
<düğme>düğme 2düğme>
<düğme>düğme 3düğme>
div>
vücut>
html>
Ardından, yalnızca birkaç satır kodla tüm düğmelere olay dinleyicilerini ekleyin.
sabit div = belge.querySelector('div')div.addEventListener("tıklamak", (olay) => {
eğer (event.target.tagName 'DÜĞME') {
konsol.kayıt('Düğmeye tıklandı')
}
});
Olay delegasyonu, Olay köpürmesine dayalı bir kalıptır. Olay köpürmesi, bir öğe bir olay aldığında ve bunu DOM'daki üst ve ata öğelerine ilettiğinde gerçekleşir. O bir olay yayılımı JavaScript'te varsayılan olarak gerçekleşen kavram.
3. onclick Özelliğini Kullanma
Kullanıcılar bir öğeye tıkladığında JavaScript'i çalıştırmak için onclick niteliğini kullanabilirsiniz. addEventListener yöntemi gibi, metin yazdırmak, hesaplamalar yapmak ve öğe özelliklerini değiştirmek için onclick yöntemini kullanabilirsiniz. DOM.
onclick olay dinleyicisini HTML öğesine bir satır içi olay işleyicisi olarak ekleyebilirsiniz. Olay, bir kullanıcı öğeye tıkladığında gerçekleşir. Aşağıdaki paragrafın rengini onclick yöntemiyle dinamik olarak değiştirin:
html>
<html>
<vücut>
<h1> onClick Olaylarını Yürüth1>
<PİD="demo"tıklamada="Fonksiyonum()">
Metin rengimi değiştirmek için beni tıklayın.
P>
vücut>
html>JavaScript dosyasına aşağıdaki kodu ekleyin:
işlevbenim işlevim() {
belge.getElementById("demo").stil.renk = "kırmızı";
}Çıktı gösterildiği gibi görünecektir:
Neden Etkinlik Dinleyicileri Hakkında Bilgi Edinmelisiniz?
Bir JavaScript geliştiricisi olarak, projelerde sıklıkla olay dinleyicileri kullanacaksınız. Olay dinleyicileriyle, olayları köpürtme ve yakalama dahil olmak üzere çok sayıda özellik oluşturabilirsiniz. Bu kavramları anlamak, uygulamalarınız üzerinde dinamik arayüzler oluşturmanızı kolaylaştıracaktır.