Örnek
Bir Bir tıklama etkinliği ekleyin <button> elemanı. Kullanıcı düğme, çıkış tıkladığında "Hello World" bir de <p> id = "demo" ile eleman:
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
addEventListener() yöntemi, belirtilen elemanına bir olay gidericisini vermektedir.
İpucu: kullan removeEventListener() ile birleştirilen bir olay işleyicisi kaldırmak için yöntem addEventListener() yöntemiyle.
İpucu: kullan belgeyi. addEventListener() yöntemi belgeye bir olay işleyicisi eklemek.
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
element .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.
Bu örnek bir kullanıcı bir tıkladığında bir işlevi yürütmek için nasıl kullanılacağını gösterir <button> elemanı:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Kendin dene " Örnek
Sen varolan olayları üzerine yazmadan, aynı elemana birçok etkinlik ekleyebilir.
Bu örnek, aynı iki tıklama olayları eklemek gösterilmiştir <button> elemanı:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Kendin dene " Örnek
Aynı elemana farklı türde etkinlik ekleyebilir.
Bu örnek aynı birçok olayları eklemek gösterilmiştir <button> elemanı:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); Kendin dene " Örnek
Parametre değerleri geçerken, bir kullanma "anonymous function" parametrelerle belirtilen işlevini çağırır:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Kendin dene " Örnek
Bir arka plan rengini değiştirme <button> elemanı:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Kendin dene " Örnek
Kabarması ve yakalama arasındaki farkı göstermek için isteğe bağlı useCapture parametresini kullanarak:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 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 <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").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:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} Kendin dene " İlgili Sayfalar
JavaScript Öğretici: HTML DOM EventListener
HTML DOM Referans: belge. addEventListener()