logo

TechCodeview

JavaScript addEventListener()

The addEventListener() metoda se používá k připojení obsluhy události ke konkrétnímu prvku. Nepřepisuje existující obslužné rutiny událostí. Události jsou prý nezbytnou součástí JavaScriptu. Webová stránka reaguje podle události, která nastala. Události mohou být generovány uživatelem nebo generovány pomocí API. Posluchač událostí je procedura JavaScriptu, která čeká na výskyt události.

Metoda addEventListener() je vestavěná funkce JavaScript . Ke konkrétnímu prvku můžeme přidat více obslužných rutin událostí, aniž bychom přepisovali stávající obslužné rutiny událostí.

Syntax

 element.addEventListener(event, function, useCapture);

Přestože má tři parametry, parametry událost a funkce jsou široce používány. Třetí parametr je volitelný k definování. Hodnoty této funkce jsou definovány následovně.

Hodnoty parametrů

událost: Je to povinný parametr. Může být definován jako řetězec, který specifikuje název události.

Poznámka: Pro hodnotu parametru nepoužívejte žádné předpony, jako je „on“. Například použijte 'click' namísto použití 'onclick'.

funkce: Je to také povinný parametr. Je to a Funkce JavaScript která reaguje na událost.

jarní rám

použít Capture: Je to volitelný parametr. Je to hodnota typu Boolean, která určuje, zda se událost provede ve fázi probublávání nebo zachycování. Jeho možné hodnoty jsou skutečný a Nepravdivé . Když je nastavena na hodnotu true, obsluha události se provede ve fázi zachycování. Když je nastaveno na false, handler se provádí ve fázi bublání. Jeho výchozí hodnota je Nepravdivé .

Podívejme se na některé ilustrace použití metody addEventListener().

Příklad

Je to jednoduchý příklad použití metody addEventListener(). Musíme kliknout na dané HTML tlačítko abyste viděli efekt.

Příklad metody addEventListener() .

html tagy

Kliknutím na následující tlačítko zobrazíte efekt.

Click me document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Ahoj světe' + '
' + 'Vítejte na javaTpoint.com'; }Otestujte to hned

Výstup

JavaScript addEventListener()

Po kliknutí na dané HTML tlačítko bude výstupem -

JavaScript addEventListener()

Nyní v dalším příkladu uvidíme, jak přidat mnoho událostí do stejného prvku bez přepsání existujících událostí.

Příklad

V tomto příkladu přidáváme více událostí do stejného prvku.

Toto je příklad přidání více událostí do stejného prvku.

Kliknutím na následující tlačítko zobrazíte efekt.

Click me function fun() { alert('Vítejte na javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Toto je druhá funkce'; } function fun2() { document.getElementById('para1').innerHTML = 'Toto je třetí funkce'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('kliknutí', zábava); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Otestujte to hned

Výstup

JavaScript addEventListener()

Nyní, když klikneme na tlačítko, zobrazí se upozornění. Po kliknutí na dané HTML tlačítko bude výstupem -

java vizualizér
JavaScript addEventListener()

Když opustíme výstrahu, výstup je -

JavaScript addEventListener()

Příklad

V tomto příkladu přidáváme do stejného prvku více událostí různého typu.

Toto je příklad přidání více událostí různého typu ke stejnému prvku.

Kliknutím na následující tlačítko zobrazíte efekt.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'žlutá'; btn.style.color = 'modrá'; } function fun1() { document.getElementById('para').innerHTML = 'Toto je druhá funkce'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', zábava); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Otestujte to hned

Výstup

JavaScript addEventListener()

Když přesuneme kurzor nad tlačítko, výstup bude -

JavaScript addEventListener()

Po kliknutí na tlačítko a opuštění kurzoru bude výstup -

JavaScript addEventListener()

Probublávání událostí nebo zachycování událostí

Nyní rozumíme použití třetího parametru addEventListener() JavaScriptu, tj. použijte Capture.

java mvc

V HTML DOM, Bublající a Snímání jsou dva způsoby šíření událostí. Tyto způsoby můžeme pochopit na příkladu.

Předpokládejme, že v něm máme prvek div a prvek odstavce a aplikujeme 'kliknout' událost pro oba pomocí addEventListener() metoda. Nyní je otázkou klepnutí na prvek odstavce, u kterého prvku se událost kliknutí zpracuje jako první.

Takže dovnitř bublání, nejprve se zpracuje událost prvku odstavce a poté se zpracuje událost prvku div. To znamená, že při probublávání se nejprve zpracuje událost vnitřního prvku a poté se zpracuje událost vnějšího prvku.

v Snímání nejprve se zpracuje událost prvku div a poté se zpracuje událost prvku odstavce. To znamená, že při zachycení se nejprve zpracuje událost vnějšího prvku a poté se zpracuje událost nejvnitřnějšího prvku.

převést řetězec na enum 
 addEventListener(event, function, useCapture);

Můžeme specifikovat šíření pomocí použijte Capture parametr. Když je nastavena na hodnotu false (což je její výchozí hodnota), pak událost používá šíření bublání, a když je nastavena na hodnotu true, dochází k šíření zachycení.

Můžeme pochopit, bublání a zachycení pomocí ilustrace.

Příklad

V tomto příkladu jsou dva prvky div. Můžeme vidět efekt bublin na prvním prvku div a efekt zachycení na druhém prvku div.

Když dvakrát klikneme na prvek span prvního prvku div, událost prvku span se zpracuje jako první než prvek div. To se nazývá bublání .

Ale když dvakrát klikneme na prvek span druhého prvku div, událost prvku div se zpracuje jako první než prvek span. To se nazývá zachycení .

 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(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Otestujte to hned

Výstup

JavaScript addEventListener()

Abychom viděli efekt, musíme na konkrétní prvky dvakrát kliknout.