JavaScript HTML DOM EventListener
Metoda addEventListener()
Příklad
Přidejte posluchač událostí, který se spustí, když uživatel klikne na tlačítko:
document.getElementById("myBtn").addEventListener("click", displayDate);
Metoda addEventListener()připojí obsluhu události k zadanému prvku.
Metoda addEventListener()připojí obslužnou rutinu události k prvku, aniž by přepsala stávající obslužné rutiny události.
K jednomu prvku můžete přidat mnoho obslužných rutin událostí.
K jednomu prvku můžete přidat mnoho obslužných rutin událostí stejného typu, tj. dvě události „kliknutí“.
Posluchače událostí můžete přidat k jakémukoli objektu DOM, nejen k prvkům HTML. tj. objekt okna.
Metoda addEventListener()usnadňuje kontrolu toho, jak událost reaguje na bublání.
Při použití této addEventListener()metody je JavaScript oddělen od značky HTML pro lepší čitelnost a umožňuje vám přidávat posluchače událostí, i když nemáte kontrolu nad značkami HTML.
removeEventListener()Pomocí této metody můžete snadno odstranit posluchač události .
Syntax
element.addEventListener(event, function, useCapture);
Prvním parametrem je typ události (jako „ click“ nebo „ mousedown“ nebo jakákoli jiná událost HTML DOM .)
Druhým parametrem je funkce, kterou chceme volat, když dojde k události.
Třetí parametr je booleovská hodnota určující, zda se má použít probublávání událostí nebo zachycování událostí. Tento parametr je volitelný.
Všimněte si, že pro událost nepoužíváte předponu "on"; použijte " click" místo " onclick".
Přidejte obslužnou rutinu události k prvku
Příklad
Upozornění "Ahoj světe!" když uživatel klikne na prvek:
element.addEventListener("click", function(){ alert("Hello World!"); });
Můžete také odkazovat na externí „pojmenovanou“ funkci:
Příklad
Upozornění "Ahoj světe!" když uživatel klikne na prvek:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Přidejte mnoho obslužných rutin událostí do stejného prvku
Tato addEventListener()metoda umožňuje přidat mnoho událostí do stejného prvku, aniž by došlo k přepsání existujících událostí:
Příklad
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Do stejného prvku můžete přidat události různých typů:
Příklad
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Přidejte obslužnou rutinu události do okna Object
Tato addEventListener()metoda vám umožňuje přidat posluchače událostí na jakýkoli objekt HTML DOM, jako jsou prvky HTML, dokument HTML, objekt okna nebo jiné objekty, které podporují události, jako je xmlHttpRequestobjekt.
Příklad
Přidejte posluchač události, který se spustí, když uživatel změní velikost okna:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Předávání parametrů
Při předávání hodnot parametrů použijte "anonymní funkci", která volá zadanou funkci s parametry:
Příklad
element.addEventListener("click", function(){ myFunction(p1, p2); });
Probublávání událostí nebo zachycování událostí?
Existují dva způsoby šíření událostí v HTML DOM, probublávání a zachycování.
Šíření události je způsob, jak definovat pořadí prvků, když nastane událost. Pokud máte prvek <p> uvnitř prvku <div> a uživatel klikne na prvek <p>, událost „click“ kterého prvku by měla být zpracována jako první?
Při probublávání se nejprve zpracuje událost nejvnitřnějšího prvku a poté vnější: nejprve se zpracuje událost kliknutí prvku <p> a poté událost kliknutí prvku <div>.
Při zachycování se nejprve zpracuje událost nejvíce vnějšího prvku a poté vnitřní: nejprve bude zpracována událost kliknutí prvku <div> a poté událost kliknutí prvku <p>.
Pomocí metody addEventListener() můžete určit typ šíření pomocí parametru "useCapture":
addEventListener(event, function, useCapture);
Výchozí hodnota je false, která použije šíření bublání, když je hodnota nastavena na hodnotu true, událost používá šíření zachycování.
Příklad
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Metoda removeEventListener()
Tato removeEventListener()metoda odstraňuje obslužné rutiny událostí, které byly připojeny pomocí metody addEventListener():
Příklad
element.removeEventListener("mousemove", myFunction);
Odkaz na objekt události HTML DOM
Seznam všech událostí HTML DOM naleznete v naší úplné Referenční příručce objektu událostí HTML DOM .