addEventListener() Yöntem, belirli bir öğeye bir olay işleyicisi eklemek için kullanılır. Mevcut olay işleyicilerini geçersiz kılmaz. Olayların JavaScript'in önemli bir parçası olduğu söylenir. Bir web sayfası meydana gelen olaya göre tepki verir. Etkinlikler kullanıcı tarafından veya API'ler tarafından oluşturulabilir. Olay dinleyicisi, bir olayın oluşmasını bekleyen bir JavaScript prosedürüdür.
addEventListener() yöntemi yerleşik bir işlevdir. JavaScript . Mevcut olay işleyicilerinin üzerine yazmadan belirli bir öğeye birden fazla olay işleyicisi ekleyebiliriz.
Sözdizimi
element.addEventListener(event, function, useCapture);
Üç parametresi olmasına rağmen parametreler etkinlik Ve işlev yaygın olarak kullanılmaktadır. Üçüncü parametrenin tanımlanması isteğe bağlıdır. Bu fonksiyonun değerleri aşağıdaki gibi tanımlanır.
Parametre Değerleri
etkinlik: Gerekli bir parametredir. Olayın adını belirten bir dize olarak tanımlanabilir.
Not: Parametre değeriyle birlikte 'on' gibi herhangi bir önek kullanmayın. Örneğin, 'onclick' yerine 'click'i kullanın.
işlev: Aynı zamanda gerekli bir parametredir. Bu bir JavaScript işlevi meydana gelen olaya tepki veren.
bash dosyayı oku
Kullanım Yakalama: İsteğe bağlı bir parametredir. Olayın köpürme aşamasında mı yoksa yakalama aşamasında mı yürütüleceğini belirten Boolean tipi bir değerdir. Olası değerleri şunlardır doğru Ve YANLIŞ . True olarak ayarlandığında olay işleyicisi yakalama aşamasında yürütülür. False olarak ayarlandığında işleyici köpürme aşamasında yürütülür. Varsayılan değeri YANLIŞ .
addEventListener() yönteminin kullanımına ilişkin bazı çizimlere bakalım.
Örnek
addEventListener() yöntemini kullanmanın basit bir örneğidir. Verilene tıklamamız gerekiyor HTML düğmesi Etkisini görmek için.
addEventListener() yönteminin örneği.
Efekti görmek için aşağıdaki düğmeye tıklayın.
Bana tıkla document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Merhaba Dünya' + '' + 'javaTpoint.com'a hoş geldiniz'; }Şimdi Test Edin
Çıktı
Verilen HTML düğmesine tıkladıktan sonra çıktı şu şekilde olacaktır:
Şimdi bir sonraki örnekte, mevcut olayların üzerine yazmadan aynı öğeye birçok olayın nasıl ekleneceğini göreceğiz.
Örnek
Bu örnekte aynı öğeye birden fazla olay ekliyoruz.
2. çeyrek ne zaman başlıyor
Bu, aynı öğeye birden fazla etkinlik eklemenin bir örneğidir.
Efekti görmek için aşağıdaki düğmeye tıklayın.
jdüğmesiBana tıkla function fun() { warning('javaTpoint.com'a hoş geldiniz'); } function fun1() { document.getElementById('para').innerHTML = 'Bu ikinci fonksiyondur'; } function fun2() { document.getElementById('para1').innerHTML = 'Bu üçüncü fonksiyondur'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('tık', eğlence); mybtn.addEventListener('tıkla', eğlence1); mybtn.addEventListener('tıkla', fun2);Şimdi Test Edin
Çıktı
Şimdi butona tıkladığımızda bir uyarı görüntülenecek. Verilen HTML düğmesine tıkladıktan sonra çıktı şu şekilde olacaktır:
Uyarıdan çıktığımızda çıktı şu şekildedir:
Örnek
Bu örnekte, aynı öğeye farklı türden birden fazla olay ekliyoruz.
Bu, aynı öğeye farklı türden birden fazla olayın eklenmesine bir örnektir.
Efekti görmek için aşağıdaki düğmeye tıklayın.
Bana tıkla fonksiyon eğlence() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'sarı'; btn.style.color = 'mavi'; } function fun1() { document.getElementById('para').innerHTML = 'Bu ikinci fonksiyondur'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('fareyle üzerine gelin', eğlence); mybtn.addEventListener('tıkla', eğlence1); mybtn.addEventListener('fare çıkışı', fun2);Şimdi Test EdinÇıktı
İmleci butonun üzerine getirdiğimizde çıktı şu şekilde olacaktır:
normal ifade java
Düğmeye tıklayıp imleci bıraktıktan sonra çıktı şu şekilde olacaktır:
Olay Kaynatma veya Olay Yakalama
Artık JavaScript'in addEventListener() fonksiyonunun üçüncü parametresinin kullanımını anladık, yani: Capture'ı kullanın.
HTML DOM'da, köpüren Ve Yakalama olayın yayılmasının iki yoludur. Bu yolları örnek alarak anlayabiliriz.
Diyelim ki içinde bir div ve bir paragraf elemanımız var ve 'tıklamak' olayı her ikisine de kullanarak addEventListener() yöntem. Şimdi soru, paragraf öğesinin tıklatılmasıyla ilgilidir; hangi öğenin click olayı ilk önce işlenir.
Yani, içinde Köpürme, İlk önce paragraf öğesinin olayı işlenir, ardından div öğesinin olayı işlenir. Bu, köpürmede önce içteki öğenin olayının, ardından en dıştaki öğenin olayının ele alınacağı anlamına gelir.
İçinde Yakalama Önce div öğesinin olayı işlenir, ardından paragraf öğesinin olayı işlenir. Bu, yakalanırken önce dıştaki elemanın olayının ele alınacağı, ardından en içteki elemanın olayının ele alınacağı anlamına gelir.
geliştirici modu nasıl devre dışı bırakılır
addEventListener(event, function, useCapture);
Yayılımı şunu kullanarak belirtebiliriz: Kullanım Yakalama parametre. False olarak ayarlandığında (varsayılan değerdir), olay köpüren yayılımı kullanır ve true olarak ayarlandığında yakalama yayılımı olur.
anlayabiliyoruz köpüren Ve yakalama bir illüstrasyon kullanarak.
Örnek
Bu örnekte iki div öğesi vardır. İlk div elemanında köpürme efektini, ikinci div elemanında ise yakalama efektini görebiliriz.
İlk div elemanının span elemanına çift tıkladığımızda, div elemanından önce span elemanının olayı ele alınır. denir köpüren .
Ancak ikinci div öğesinin span öğesine çift tıkladığımızda, div öğesinin olayı, span öğesinden önce önce işlenir. denir yakalama .
div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); Şimdi Test Edin Çıktı
Efekti görmek için belirli öğelere çift tıklamamız gerekir.