addEventListener vs onClick w JavaScript
Podczas tworzenia stron internetowych dla strony internetowej może istnieć wymóg umieszczenia dodatkowych funkcji dla ulepszonych funkcji. Na przykład, w przypadku testowania automatyzacji, sprawdź działanie różnych funkcji przy spustu zdarzenia. W takich przypadkach JavaScript zapewnia dwie ważne techniki, które pomagają w utworzeniu ogólnego projektu dokumentów o nazwie metody addEventListener () i zdarzenia onClick.
Ten podręcznik będzie teoretycznie i praktycznie porównuje AddEventListener i wydarzenie OnClick.
addEventListener vs onClick w JavaScript
W JavaScript „The„addEventListener ()”Metoda i„na kliknięcie„Zdarzenie zarówno działają na wydarzenie i może uruchomić funkcję oddzwonienia po kliknięciu przycisku. Nie są jednak całkowicie takie same.
Metoda addEventListener () zawiera zdarzenie w argumencie. Ponadto może zastosować wiele obsługi zdarzeń do tego samego elementu i nie zastępuje wielu obsługi zdarzeń jednocześnie. Podczas gdy zdarzenie OnClick jest wyzwalane, gdy użytkownik kliknie odpowiedni przycisk w stosunku do zdarzenia. Jest to tylko właściwość obiektu HTMlelement i może być zastąpiona, w przeciwieństwie do metody addEventListener ().
Składnia
element.addEventListener (wydarzenie, słuchacz, usecapture);W podanej składni „wydarzenie”Odnosi się do określonego wydarzenia„ ”słuchacz”To funkcja, która zostanie wywołana i„Usecorture”To opcjonalna wartość.
Składnia
Html
W podanej składni „element”Wskazuje element, z którym„na kliknięcie„Wydarzenie będzie powiązane. Tutaj, "Myscript”Odnosi się do funkcji, która zostanie wywołana, na której nastąpi zdarzenie OnClick.
JavaScript
obiekt.onClick = function () myscript;Podobnie w powyższej składni „obiekt”Odnosi się do obiektu powiązanego z wydarzeniem OnClick.
Podstawowe różnice między addEventListener a wydarzeniem OnClick
| addEventListener | na kliknięcie |
| Metodę addeventListener można dodać tylko w JavaScript. | OnClick można uwzględnić zarówno w HTML, jak i w JavaScript. |
| AddEventListener nie działa w starszych wersjach niektórych przeglądarków. | OnClick jest kompatybilny ze wszystkimi przeglądarkami. |
| Ta funkcja może dołączyć wiele zdarzeń do konkretnego elementu. | To wydarzenie kojarzy tylko jedno wydarzenie z elementem. |
| Nie może połączyć plików HTML i JavaScript. | Zdarzenie onClick może łączyć funkcje HTML i JavaScript. |
Teraz przejdźmy do następujących przykładów, aby jasno zrozumieć określoną różnicę.
Przykład: metoda addEventListener () do wykrycia, czy naciśnięty jest konkretny klawisz
W tym konkretnym przykładzie zastosuj „dokument.addEventListener ()”Metoda i załącz wydarzenie o nazwie„Keydown„W swoim argumencie. Spowoduje to powiadomienie użytkownika przez alert, gdy „Wchodzić„Klawisz jest naciskany:
dokument.addEventListener („keydown”, (e) =>if (e.key == „enter”)
alert („Wprowadź klawisz naciśnięty”)
);
Odpowiednie wyjście będzie:
Przykład: zdarzenie OnClick, aby zmienić kolor przycisku
W poniższym przykładzie utworzymy przycisk o „przycisk" ID. Następnie dołącz „na kliknięcie„Wydarzenie, które wywoła przycisk funkcji () po przycisku Kliknij:
Teraz zdefiniuj funkcję o nazwie „kolor przycisku()". W definicji funkcji uzyskaj dostęp do przycisku za pomocą „dokument.Geelementbyid ()" metoda. Zastosuj także styl.Właściwość Tła Color, aby ustawić kolor przycisku i przypisać mu kod koloru RGB jako tło:
Funkcja ButtonColor ()dokument.getElementById („przycisk”).styl.BackgroundColor = '#911';
Wyjście
Przykład: OnClick zdarzenie, aby zmienić kolor przycisku za pomocą JavaScript
Wyżej wymyślony przykład można zastosować, dodając „na kliknięcie„Wydarzenie w kodzie JavaScript. Aby to zrobić, najpierw utwórz przycisk za pomocą „”Tag:
Teraz przycisk utworzony za pomocą „dokument.getElementById ()„Metoda i zastosuj„na kliknięcie„Wydarzenie na to. Teraz powtórz wszystkie kolejne kroki w celu zmiany koloru przycisku:
Niech przycisk = dokument.getElementById („przycisk”)przycisk.onClick = Funkcja ButtonColor ()
dokument.getElementById („przycisk”).styl.BackgroundColor = '#911';
Spowoduje to to samo wyjście:
Omówiliśmy różnice między addEventListener a onClick w JavaScript.
Wniosek
Główną różnicą między funkcją AddEventListener a zdarzeniem OnClick jest to, że AddEventListener może dołączyć wiele zdarzeń do jednego elementu HTML, podczas gdy zdarzenie OnClick może tylko powiązać zdarzenie kliknięcia z przyciskiem. Ponadto AddEventListener można wykorzystać tylko z kodem JavaScript, a zdarzenie OnClick działa zarówno w plikach HTML, jak i JavaScript. Ten podręcznik prowadził metodę AddEventListener i wydarzenie OnClick zarówno teoretycznie, jak i praktycznie.