Az addEventListener metódus

Az addEventListener metódus lehetővé teszi elemekhez eseménykezelők rendelését. Segítségével meghatározhatjuk például, hogy mit tegyen egy gomb klikkelésekor, vagy mit tegyen szöveg beírásakor egy szövegmezőbe. Az első paraméterben az esemény típusát adjuk meg, a másodikban pedig a függvényt, amely az első paraméterben megadott esemény bekövetkeztekor fog aktiválódni. A harmadik, opcionális paraméterben az objektum jellemzőit (once, capture, passive) vagy a useCapture paramétert adjuk át.

Szintaxis

javascriptelem.addEventListener('eseménytípus', függvény, [objektum jellemzők]);
vagy
elem.addEventListener('eseménytípus', függvény, [useCapture]);

Példa

Állítsuk be, hogy egy gombra kattintáskor üzenet jelenjen meg:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('message');
});

Результат:

Példa

Írjunk kódot, amely egy input fókuszvesztésekor kiírja annak szövegét egy üzenetben:

html<input id="input" value="text">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

Példa

Állítsuk be, hogy egy gombra kattintáskor az üzenet csak egyszer jelenjen meg a konzolon. Ehhez használjuk a harmadik paramétert:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('message');
  },
  {
    once: true
  }
);

Példa

A passive paraméter megtiltja az event.preventDefault metódus hívását az esemény feldolgozása során. Alkalmazzuk az event.preventDefault metódust az előző példára, és adjuk meg a passive paramétert true értékkel:

html<input type="button" id="button" value="click me">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('No message');
  },
  {
    passive: true
  }
);

A kód végrehajtása után a következő üzeneteket látjuk:

javascript'No message';
'Unable to preventDefault inside passive event listener invocation.'

Példa

A useCapture paraméter true értéke esetén az események a belső elemtől a külső felé bugyognak (capturing), false érték esetén pedig a külső elemtől a belső felé (bubbling). A useCapture paraméter átadásakor a név elhagyható, és egyszerűen true vagy false értéket írunk. Nézzük meg, hogyan bugyognak az események a szülő és a gyermekelemben, amikor rájuk kattintunk:

html<div id="parent">Parent
  <p id="child">Child</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'), 
  true
);
child.addEventListener('click',
  () => alert('child'), 
  true
);

Результат:

Lásd még