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 :

element.addEventListener(event, fonksiyon, useCapture)

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.

Ö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:

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:



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:

element.addEventListener(event, fonksiyon, useCapture)

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


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

8670

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.