Co to jest wydarzenie.cel w JavaScript?

Jakiś "wydarzenie”Występuje, gdy zmienia się stan obiektu. Działania użytkownika, takie jak naciśnięcie dowolnego klucza lub kliknięcie myszy, mogą powodować zdarzenia. Istnieje pewne właściwości zdarzenia w JavaScript, które pomaga w funkcjach obsługi zdarzeń. „„wydarzenie.cel”Jest jednym z nich, który określa, który konkretny element wywołał zdarzenie.

Ten post ilustruje „wydarzenie.cel ”i jego użycie w JavaScript.

Co to jest „wydarzenie.cel ”w JavaScript?

„„wydarzenie.cel”Jest właściwością/atrybutem„wydarzenie„W JavaScript. Odnosi się do elementu, który wywołał zdarzenie. Aby uzyskać dostęp do wydarzenia.atrybut docelowy, zdarzenie elementu należy wysłuchać. „„addEventListener ()„Metoda jest wykorzystywana do słuchania konkretnego zdarzenia.

Składnia

Za używanie „zdarzenia.właściwość docelowa ”, postępuj zgodnie z podaną składnią:

element.addEventListener („”, funkcja (event)
konsola.Log (zdarzenie.cel)
)

W danej składni,

• „„addEventListener ()”Metoda stosuje się do dodawania obsługi zdarzeń dla określonego elementu.
• "”Wskazuje każde zdarzenie, takie jak„Kliknij”,„myszy", i tak dalej.

Przykład

W danym przykładzie otrzymamy element, który wywołał zdarzenie za pomocą „wydarzenie.cel" nieruchomość.

Tutaj utworzymy przycisk, przypisując identyfikator „Btn„To jest używane w JavaScript do dostępu do przycisku:

Kliknij tutaj

W pliku JavaScript najpierw otrzymamy odniesienie przycisku za pomocą jego przypisanego identyfikatora za pomocą „getElementById ()" metoda:

const Button = Dokument.getElementById („btn”);

Dołącz słuchacz zdarzeń za pomocą przycisku. „„Kliknij„Wydarzenie jest inicjowane przy kliknięciu przycisku, a obiekt zdarzenia jest przekazywany do słuchacza zdarzenia jako argument. „„wydarzenie.cel„Atrybut jest dostępny z funkcji słuchacza, aby uzyskać odniesienie do elementu przycisku, który wywołał zdarzenie:

przycisk.addEventListener („kliknij”, funkcja (zdarzenie)
konsola.log („zdarzenie docelowe:”, wydarzenie.cel);
);

Wyjście pokazuje odniesienie do określonego przycisku, który jest klikany:

Możesz uzyskać więcej informacji i zastosować różne funkcje, takie jak stylowanie docelowego zdarzenia za pomocą jego atrybutów.

Jakie są atrybuty „wydarzenia.cel"?

Istnieją różne atrybuty „wydarzenia.właściwość docelowa ”, która dostarcza informacji o elemencie docelowym. Kilka wspólnych atrybutów wydarzenia.Obiekt docelowy jest następujący:

wydarzenie.atrybuty docelowe	Opis
wydarzenie.cel.Nazwa znacznika	Używane do uzyskania „nazwa”Znacznik HTML elementu docelowego.
wydarzenie.cel.wartość	Wykorzystaj do odzyskania „wartość”Elementu docelowego. Ten atrybut jest najczęściej używany do elementów wejściowych.
wydarzenie.cel.ID	Za zdobycie „ID”Atrybut elementu docelowego, użyj podanego atrybutu.
wydarzenie.cel.Lista klas	Lista „zajęcia„Zawierający element docelowy jest dostępny przez ten atrybut.
wydarzenie.cel.TextContent	Używane do uzyskania „Treść tekstowa”Elementu docelowego.
wydarzenie.cel.Href	Ten atrybut odzyskuje „Href”Atrybut elementu docelowego, takiego jak linki.
wydarzenie.cel.styl	Do modyfikacji „CSS„Właściwość elementu docelowego, użyj tego atrybutu.

Przykład 1: Zmień kolor tła elementu docelowego

W dostarczonym przykładzie zmienimy kolor tła elementu docelowego za pomocą „styl”Atrybut„ „Kliknij" wydarzenie:

const Button = Dokument.getElementById („btn”);
przycisk.addEventListener („kliknij”, funkcja (zdarzenie)
wydarzenie.cel.styl.tło Color = "Blue";
);

Wyjście

Przykład 2: Uzyskaj wartość elementu docelowego

Utwórz pole tekstowe wejściowe i obszar do wyświetlania tekstu za pomocą

etykietka. Przypisz identyfikatory do pola wejściowego i

tag as „TakeInput" I "pokazywać”Odpowiednio:

Uzyskaj odniesienie pola tekstowego za pomocą „getElementById ()" metoda:

var input = dokument.getElementById („TakeInput”);

Użyj "wartość”Atrybut z„wydarzenie.cel„Aby uzyskać wartość docelowego elementu:

wejście.addEventListener („wejście”, (zdarzenie) =>
dokument.getElementById („show”).innerHtml = zdarzenie.cel.wartość;
)

Jak widać, że wartość wprowadzona w polu tekstowym została pomyślnie odzyskana za pomocą „wartość" atrybut:

Chodziło o „wydarzenie.cel ”w JavaScript.

Wniosek

„„wydarzenie.cel”Odnosi się do elementu, który wywołał/zainicjował zdarzenie. Istnieją pewne atrybuty „wydarzenia.właściwość docelowa ”, która dostarcza informacji o elemencie docelowym. Na przykład, "wydarzenie.cel.Nazwa znacznika”,„.wartość”,„.ID”,„.styl", i tak dalej. Ten post ilustruje „wydarzenie.cel ”, jego atrybuty i jego użycie w JavaScript.