logo

TechCodeview

JavaScript addEventListener()

The dodajEventListener() Metoda służy do dołączenia obsługi zdarzenia do określonego elementu. Nie zastępuje istniejących procedur obsługi zdarzeń. Mówi się, że zdarzenia są istotną częścią JavaScript. Strona internetowa reaguje w zależności od zdarzenia, które miało miejsce. Zdarzenia mogą być generowane przez użytkowników lub generowane przez interfejsy API. Detektor zdarzeń to procedura JavaScriptu oczekująca na wystąpienie zdarzenia.

Metoda addEventListener() jest wbudowaną funkcją JavaScript . Możemy dodać wiele procedur obsługi zdarzeń do konkretnego elementu bez nadpisywania istniejących procedur obsługi zdarzeń.



Składnia

 element.addEventListener(event, function, useCapture);

Chociaż ma trzy parametry, parametry wydarzenie I funkcjonować są powszechnie stosowane. Trzeci parametr można zdefiniować opcjonalnie. Wartości tej funkcji definiuje się w następujący sposób.

Wartości parametrów

wydarzenie: Jest to parametr wymagany. Można go zdefiniować jako ciąg znaków określający nazwę zdarzenia.

Uwaga: Nie używaj żadnego przedrostka, takiego jak „on”, z wartością parametru. Na przykład użyj „kliknij” zamiast „onclick”.

funkcjonować: Jest to również parametr wymagany. To jest Funkcja JavaScriptu który reaguje na zdarzenie.



losowy c

użyjPrzechwytywania: Jest to parametr opcjonalny. Jest to wartość typu Boolean, która określa, czy zdarzenie jest wykonywane w fazie propagacji, czy przechwytywania. Jego możliwe wartości to PRAWDA I FAŁSZ . Gdy jest ustawiona na true, procedura obsługi zdarzeń jest wykonywana w fazie przechwytywania. Gdy jest ustawiona na false, procedura obsługi jest wykonywana w fazie propagacji. Jego domyślna wartość to FAŁSZ .

Zobaczmy kilka ilustracji użycia metody addEventListener().

Przykład

Jest to prosty przykład użycia metody addEventListener(). Musimy kliknąć podane Przycisk HTML żeby zobaczyć efekt.



Przykład metody addEventListener().

Aby zobaczyć efekt, kliknij poniższy przycisk.

Kliknij mnie document.getElementById('btn').addEventListener('click', zabawa); funkcja zabawa() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Witamy w javaTpoint.com'; }Przetestuj teraz

Wyjście

JavaScript addEventListener()

Po kliknięciu danego przycisku HTML, wyjściem będzie -

polecenie zip w systemie Linux
JavaScript addEventListener()

Teraz w następnym przykładzie zobaczymy, jak dodać wiele zdarzeń do tego samego elementu bez nadpisywania istniejących zdarzeń.

Przykład

W tym przykładzie dodajemy wiele zdarzeń do tego samego elementu.

To jest przykład dodania wielu zdarzeń do tego samego elementu.

Aby zobaczyć efekt, kliknij poniższy przycisk.

Kliknij mnie, funkcja fun() { alert('Witamy w javaTpoint.com'); } funkcja fun1() { document.getElementById('para').innerHTML = 'To jest druga funkcja'; } funkcja fun2() { document.getElementById('para1').innerHTML = 'To jest trzecia funkcja'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('kliknięcie', zabawa); mybtn.addEventListener('kliknięcie', zabawa1); mybtn.addEventListener('kliknięcie', zabawa2);Przetestuj teraz

Wyjście

JavaScript addEventListener()

Teraz, gdy klikniemy przycisk, wyświetli się alert. Po kliknięciu danego przycisku HTML, wyjściem będzie -

JavaScript addEventListener()

Kiedy wyjdziemy z alertu, wyjściem będzie -

JavaScript addEventListener()

Przykład

W tym przykładzie dodajemy wiele zdarzeń różnego typu do tego samego elementu.

To jest przykład dodania wielu zdarzeń różnego typu do tego samego elementu.

Java nie

Aby zobaczyć efekt, kliknij poniższy przycisk.

Java do obiektu json
Kliknij mnie, funkcja fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'żółty'; btn.style.color = 'niebieski'; } funkcja fun1() { document.getElementById('para').innerHTML = 'To jest druga funkcja'; } funkcja fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('najechanie myszką', zabawa); mybtn.addEventListener('kliknięcie', zabawa1); mybtn.addEventListener('mouseout', fun2);Przetestuj teraz

Wyjście

JavaScript addEventListener()

Gdy przesuniemy kursor na przycisk, wynikiem będzie -

JavaScript addEventListener()

Po kliknięciu przycisku i opuszczeniu kursora wyjściem będzie -

JavaScript addEventListener()

Bulgotanie zdarzeń lub przechwytywanie zdarzeń

Teraz rozumiemy użycie trzeciego parametru addEventListener() JavaScriptu, tj. użyj Przechwytywania.

W DOM-ie HTML, Bulgotanie I Przechwytywanie to dwa sposoby propagacji zdarzeń. Możemy zrozumieć te sposoby, biorąc przykład.

Załóżmy, że mamy wewnątrz element div i element akapitu i stosujemy metodę 'Kliknij' zdarzenie dla nich obojga za pomocą dodajEventListener() metoda. Teraz pytanie dotyczy kliknięcia elementu akapitu i zdarzenia kliknięcia tego elementu, które jest obsługiwane jako pierwsze.

Więc w bulgotanie, najpierw obsługiwane jest zdarzenie elementu akapitu, a następnie obsługiwane jest zdarzenie elementu div. Oznacza to, że w przypadku propagacji najpierw obsługiwane jest zdarzenie elementu wewnętrznego, a następnie zdarzenie elementu najbardziej zewnętrznego.

W Przechwytywanie najpierw obsługiwane jest zdarzenie elementu div, a następnie obsługiwane jest zdarzenie elementu akapitu. Oznacza to, że podczas przechwytywania najpierw obsługiwane jest zdarzenie elementu zewnętrznego, a następnie obsługiwane jest zdarzenie elementu najbardziej wewnętrznego.

pole listy HTML 
 addEventListener(event, function, useCapture);

Możemy określić propagację za pomocą użyj Przechwytywania parametr. Gdy jest ustawiona na wartość false (co jest wartością domyślną), wówczas zdarzenie wykorzystuje propagację bąbelkową, a gdy jest ustawione na wartość true, następuje propagacja przechwytywania.

Możemy zrozumieć bulgotanie I przechwytywanie za pomocą ilustracji.

Przykład

W tym przykładzie istnieją dwa elementy div. Widzimy efekt bulgotania na pierwszym elemencie div i efekt przechwytywania na drugim elemencie div.

Kiedy dwukrotnie klikniemy element span pierwszego elementu div, zdarzenie elementu span zostanie obsługiwane jako pierwsze, a nie element div. Nazywa się to bulgotanie .

Kiedy jednak dwukrotnie klikniemy element span drugiego elementu div, zdarzenie elementu div zostanie obsłużone jako pierwsze, a nie element span. Nazywa się to przechwytywanie .

 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);
Przetestuj teraz

Wyjście

JavaScript addEventListener()

Aby zobaczyć efekt, musimy dwukrotnie kliknąć wybrane elementy.