Ana içerik
Bilgisayar Programlama
Konu: Bilgisayar Programlama > Ünite 6
Ders 5: DOM Olayları- Web Sayfalarını Olaylarla (Event’lerle) İnteraktif Hale Getirme
- Bir olay dinleyicisi ekleme
- Zor Görev: Kedi Tıklama
- DOM olay türleri
- Olay özelliklerini kullanma
- Zor Görev: Kedi-saklama
- Formları olaylarla işleme
- Zor Görev: Kim, Kiminle, Nerede
- Olayların ön tanımlı davranışlarını önleme
- Özet: DOM olayları
© 2023 Khan AcademyKullanım ŞartlarıGizlilik PolitikasıÇerez Politikası
Özet: DOM olayları
Olay dinleyicileri ekleme
Bir öğeye bir olay olduğunda, tarayıcının belirli bir fonksiyonu çağırdığından emin olmak için,
document.addEventListener
kullanmalısınız:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);
Birinci argüman olarak birçok geçerli dize geçirebilirsiniz, olay türleri makalesine bakın.
Meydana gelen olayla ilgili bilgi isterseniz, tarayıcının geriçağırım fonksiyonunuza geçirdiği olay nesnesine bakabilirsiniz:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
Olay nesnesinde pek çok özellik vardır, tüm listeyi buradan görebilirsiniz.
Bir bağlantıdaki tıklama veya bir formdaki teslim etme davranışını geçersiz kılıyorsanız, tarayıcının ön tanımlı davranışını engellemek için,
event.preventDefault()
'u çağırmak isteyebilirsiniz.Olay dinleyicilerini kaldırmak
Belirli bir olay dinleyicisine artık ihtiyacınız yoksa, onu
removeEventListener
kullanarak kaldırabilirsiniz:var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// later...
faceEl.removeEventListener("click", onFaceClick);
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.