javaScript addEventListener () nedir?

Bazen bir web sayfası oluştururken, biri web sitenizde belirli bir etkinlik türünü tetiklediğinde bir kod parçası yürütmek isteyebilirsiniz.

Javascript addEventListener methodu ile bunu hızlı ve kolay bir ÅŸekilde yapabilirsiniz.

addEventListener() methodu, belirtilen öğeye bir olay iÅŸleyicisini ekler. Bu olay meydana geldiÄŸinde, dinleyici fonksiyon yürütülür. Bu method bir deÄŸer döndürmez.

Ä°pucu : addEventListener() methoduna eklenmiÅŸ bir olay iÅŸleyiciyi kaldırmak için removeEventListener() methodu kullanın.

Ä°pucu: Belgeye bir olay iÅŸleyicisini eklemek için document.addEventListener() yöntemini kullanın.

Tarayıcı Desteği

Element
addEventListener	1.0	9.0	1.0	1.0	7.0

Sözdizimi :

Parametreler :

Event: Olay türüdür ("click" veya "mousedown" gibi).

Not: 'on' önekini kullanmayın. Örneğin: 'onclick' yerine 'click' tuşunu kullanın.

Fonksiyon: Olay tetiklendikten sonra çağrılan işlevdir.

useCapture: Üçüncü parametre, olayın kabarcıklanma veya yakalama olup olmadığını açıklayan bir Boolen değeridir. Bu parametre isteğe bağlıdır.

• true: Olay iÅŸleyicisi yakalama aÅŸamasında yürütülür.
• false: Varsayılan. Olay iÅŸleyici, kabarcıklanma aÅŸamasında yürütülür.

Örnek:

Parametre değerleri iletirken, fonksiyon parametreleri çağırlan yere "anonim fonksiyon" kullanabilirsiniz :

  
   element.addEventListener("click", function(){

           alert("Merhaba dünya"); 
    });

  

Bir Öğeye Etkinlik İşleyici Ekleme

---

Harici bir "adlandırılmış" fonksiyonada başvurabilirsiniz.

  function merhaba() {

  alert('Merhaba dünya');
}

var button = document.getElementById('btn');

button.addEventListener('click', merhaba);

AddEventListener methodu, geçerli nesnenin aynı olayı için birden çok farklı dinleyici iÅŸlevi ekleyebilirsiniz. Bu iÅŸlevler eklendikleri sırayla tetiklenir. Aynı olay için aynı dinleyici iÅŸlevini birden çok kez eklerseniz, iÅŸlev yalnızca bir kez uygulanır ve eklemeler otomatik olarak kaldırılır (removeEventListener methodu kullanarak bunları el ile kaldırmak zorunda kalmazsınız).

function merhaba() {
  console.log('Merhaba dünya');
}

document.addEventListener('click', merhaba);

document.addEventListener('click', merhaba);

/* Web sayfasına tıklayın */

Yukarıdaki kodun çalıştırılması, dokümanın üzerine tıklandığında sadece tek bir Merhaba dünya yazısı olacaktır.

Mevcut öğenin üzerine yazmadan, aynı öğeye çok sayıda etkinlik ekleyebilirsiniz.

Bu örnek, bir belgeye iki tıklama olayının nasıl ekleneceğini gösterir:

document.addEventListener ("click", myFunction); 

document.addEventListener ("click", someOtherFunction);

Aynı Öğeye Birden Çok Olay İşleyicisi Ekleme

---

AddEventListener() methodu, varolan olayların üzerine yazmadan, aynı öğeye çok sayıda olay eklemenize olanak tanır:

Bu örnek, aynı <button> öğesine birçok olayın nasıl ekleneceğini gösterir:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);

document.getElementById("myBtn").addEventListener("click", someOtherFunction);

document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

Pencere nesnesine bir olay iÅŸleyicisi ekleyin.

---

AddEventListener() methodu, HTML öğeleri, HTML belgesi, window nesnesi veya xmlHttpRequest nesnesi gibi olayları destekleyen, diÄŸer nesneler gibi herhangi bir HTML DOM nesnesine olay dinleyicileri eklemenizi saÄŸlar.

Bir kullanıcı pencereyi yeniden boyutlandırdığında tetikleyen bir olay dinleyicisi ekleyin:

ÖRNEK:

HTML:

<p id="demo"></p>

javaScript:

window.addEventListener("resize", function(){

    document.getElementById("demo").innerHTML = Math.random();
});

Geçiş parametreleri

---

Parametre değerlerini iletirken, belirtilen fonksiyon parametreleriyle çağıran bir "anonim fonksiyon" kullanın:

HTML:

<button id="myBtn">Tıkla</button>

<p id="demo"></p>

javaScript:

var p1 = 5;

var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {

    myFunction(p1, p2);
});

function myFunction(a, b) {

    var sonuc = a * b;

    document.getElementById("demo").innerHTML = sonuc;
}

Olay Bubbling veya Olay Yakalama?

---

HTML Dom'da kabarcıklanma ve yakalama için iki etkinlik vardır.

Olay yayılımı, bir olay meydana geldiğinde eleman sırasını tanımlamanın bir yoludur. <Div> öğesinin içinde <p> öğeniz varsa ve kullanıcı <p> öğesine tıklarsa, öncelikle hangi öğede "tıklama" etkinliğinin ele alınması gerekir?

Bubling(kabarcıklanma) <p> öğesinin tıklama etkinlik, ilk olarak ele alınır ardından <div> öğesinin tıklama olayı ele alınır; yani iç öğede olay ilk ve daha sonra dış ele alınır.

Yakalama, dış elementde olay ilk ve daha sonra iç işlenir: <div> öğesinin tıklama etkinlik ilk önce ele alınır, <p> öğesi son tıklama olayı ele alınacaktır.

AddEventListener() methoduyla "useCapture" parametresini kullanarak yayılma türünü belirtebilirsiniz:

Varsayılan değer false; bu değer, kabarcıklanma yayılımını kullanır, değer true değerine ayarlandığında, olay yakalama yayılımını kullanır.

Event bubbling(kabarcık) ve capturing(yakalama) Nedir? hakkında fazla bilgi için Tıklayın

ÖRNEK:

var x = document.getElementById("testP")

x.addEventListener("click", testFunction, true);

var x1 = document.getElementById("testDiv")

x1.addEventListener("click", testFunction, true);

RemoveEventListener () Methodu

RemoveEventListener() methodu, addEventListener() methoduyla eklenmiÅŸ olan olay iÅŸleyicileri kaldırır:

ÖRNEK:

element.removeEventListener("mousemove", testFunction);

addEventListener ile diğer olay dinleyicileri arasındaki fark

---

• AddEventListener() methodu, bir olay iÅŸleyicisini varolan olay iÅŸleyicilerinin üzerine yazmadan bir öğeye ekler.
• Tek bir öğeye çok sayıda olay iÅŸleyicisi ekleyebilirsiniz.
• Aynı türden çok sayıda olay iÅŸleyicisini bir öğeye, yani iki "click" etkinliÄŸine ekleyebilirsiniz.
• Yalnızca HTML öğelerini deÄŸil herhangi bir DOM nesnesine etkinlik dinleyicileri ekleyebilirsiniz. Örnek window nesnesi gibi.
• AddEventListener() methodu, olayın bubbling(kabarcıklanmaya) nasıl tepki vereceÄŸini kontrol etmeyi kolaylaÅŸtırır.
• AddEventListener() methodu kullanırken, JavaScript daha iyi okunabilirlik için HTML iÅŸaretlemesinden ayrılır ve HTML iÅŸaretlemesini kontrol etmediÄŸinizde bile olay dinleyicileri eklemenize izin verir.
• RemoveEventListener() methodu kullanarak bir olay dinleyicisini kolayca kaldırabilirsiniz.

155

Gönder