Örnek
Belgeye bir tıklama etkinliği ekleyin. Kullanıcı belgesinde, çıktı her yerde tıkladığında "Hello World" bir de <p> id = "demo" ile eleman:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
document. addEventListener() document. addEventListener() metodu belgeye bir olay gidericisini vermektedir.
İpucu: kullan belgeyi. removeEventListener() metodu ile birleştirilen bir olay işleyicisi kaldırmak için addEventListener() yöntemi.
İpucu: kullan elemanı. addEventListener() yöntemi, belirtilen elemanına bir olay gidericisini bağlamak için.
Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7 |
Not: addEventListener() metodu Internet Explorer 8 ve önceki sürümleri, ve Opera 6.0 ve önceki sürümlerde desteklenmez. Ancak, bu özel tarayıcı sürümleri, kullanabileceğiniz attachEvent() olay işleyicileri eklemek için yöntem (see "More Examples" below for a cross-browser solution) .
Sözdizimi
document.addEventListener( event , function ,
useCapture )
Parametre Değerleri
| Parametre | Açıklama |
|---|---|
| event | Gereklidir. Etkinliğin adını belirten bir dize. Not: kullanmayın "on" öneki. Örneğin, kullanmak "click" yerine "onclick" . Tüm HTML DOM Olaylar listesi için lütfen tüm bakmak HTML DOM Olay Nesne Referans . |
| function | Gereklidir. Olay ortaya çıktığında çalıştırmak için işlevini belirtir. olayı gerçekleştiğinde, bir olay nesnesi ilk parametre olarak geçirilir. olay nesnesinin type belirtilen olay bağlıdır. Örneğin, "click" olay MouseEvent nesnesine aittir. |
| useCapture | İsteğe bağlı. Olay yakalama veya köpürme aşamasına yürütülmesi gereken bir Boolean değeri. Olası değerler:
|
Teknik detaylar
| DOM Versiyon: | DOM Düzey 2 Olaylar |
|---|---|
| Geri dönüş değeri: | Hiçbir dönüş değeri |
| Değişiklikler: | UseCapture parametresi Firefox 6 ve Opera 11.60 isteğe bağlı hale gelmiştir (has always been optional for Chrome, IE and Safari) |
Diğer Örnekler
Örnek
Ayrıca, harici başvurabilir "named" fonksiyonu:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Kendin dene " Örnek
Sen varolan olayları üzerine yazmadan, belgeye birçok etkinlik ekleyebilir.
Bu örnek belgeye iki tıklama olayları nasıl ekleneceğini gösterir:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Kendin dene " Örnek
Sen belgeye farklı türde etkinlik ekleyebilir.
Bu örnek belgeye birçok olayları eklemek gösterilmiştir:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Kendin dene " Örnek
Parametre değerleri geçerken, bir kullanma "anonymous function" parametrelerle belirtilen işlevini çağırır:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Kendin dene " Örnek
Belgenin arka plan rengini değiştirme <body> elemanı:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Kendin dene " Örnek
Kullanma removeEventListener() ile bağlı olan bir olay işleyicisi kaldırmak için bir yöntem addEventListener() yöntemi:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Kendin dene " Örnek
Desteklemeyen tarayıcılar için addEventListener() yöntemini kullanabilirsiniz attachEvent() yöntemini.
Bu örnek bir çapraz tarayıcı çözüm gösterir:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Kendin dene " İlgili Sayfalar
JavaScript Öğretici: HTML DOM EventListener
HTML DOM Referans: öğesi. addEventListener()