Ten post zilustruje „event.target” i jego użycie w JavaScript.
Co to jest „event.target” w JavaScript?
„ zdarzenie.cel ” jest właściwością/atrybutem „ wydarzenie ” w JavaScript. Odnosi się do elementu, który wywołał zdarzenie. Aby uzyskać dostęp do atrybutu event.target, należy odsłuchać zdarzenie elementu. „ addEventListener() ” służy do odsłuchu określonego zdarzenia.
Składnia
Aby użyć właściwości „event.target”, postępuj zgodnie z podaną składnią:
element. addEventListener ( '
konsola. dziennik ( wydarzenie. cel )
} )
W podanej składni
- „ addEventListener() ” służy do dodawania obsługi zdarzeń dla określonego elementu.
- “
” oznacza dowolne zdarzenie, takie jak „ Kliknij ”, „ najechanie myszką ', i tak dalej.
Przykład
W podanym przykładzie element, który wywołał zdarzenie, otrzymamy za pomocą „ zdarzenie.cel ' nieruchomość.
Tutaj utworzymy przycisk, przypisując identyfikator „ btn ”, który jest używany w JavaScript do uzyskiwania dostępu do przycisku:
< identyfikator przycisku = 'btn' > Kliknij tutaj przycisk >
W pliku JavaScript najpierw otrzymamy odniesienie do przycisku za pomocą przypisanego mu identyfikatora za pomocą „ getElementById() ' metoda:
konst przycisk = dokument. getElementById ( 'btn' ) ;Dołącz detektor zdarzeń za pomocą przycisku . „ Kliknij ” jest inicjowane po kliknięciu przycisku, a obiekt zdarzenia jest przekazywany jako argument do detektora zdarzeń. „ zdarzenie.cel ” jest dostępny z funkcji nasłuchiwania, aby uzyskać odwołanie do elementu przycisku, który wyzwolił zdarzenie:
przycisk. addEventListener ( 'Kliknij' , funkcja ( wydarzenie ) {konsola. dziennik ( „Zdarzenie docelowe:” , wydarzenie. cel ) ;
} ) ;
Dane wyjściowe pokazują odniesienie do określonego klikniętego przycisku:
Możesz uzyskać więcej informacji i zastosować różne funkcje, takie jak stylizacja na docelowym zdarzeniu za pomocą jego atrybutów.
Jakie są atrybuty „event.target”?
Istnieją różne atrybuty właściwości „event.target”, które dostarczają informacji o elemencie docelowym. Oto kilka typowych atrybutów obiektu event.target:
| event.target Atrybuty | Opis |
| nazwa.celu.zdarzenia.zmienna | Służy do uzyskiwania „ nazwa ” znacznika HTML elementu docelowego. |
| wartość.docelowa.zdarzenia | Użyj do odzyskania „ wartość ” elementu docelowego. Ten atrybut jest najczęściej używany w przypadku elementów wejściowych. |
| identyfikator.celu.zdarzenia | Za otrzymanie „ ID ” elementu docelowego, użyj podanego atrybutu. |
| event.target.classList | Lista „ klasy ” zawierający element docelowy jest dostępny za pomocą tego atrybutu. |
| zdarzenie.cel.tekstZawartość | Służy do uzyskiwania „ treść tekstu ” elementu docelowego. |
| zdarzenie.cel.href | Ten atrybut pobiera „ href ” atrybut elementu docelowego, taki jak linki. |
| styl.celu.zdarzenia | Aby zmodyfikować „ CSS ” właściwości elementu docelowego, użyj tego atrybutu. |
Przykład 1: Zmień kolor tła elementu docelowego
W podanym przykładzie zmienimy kolor tła elementu docelowego za pomocą „ styl ” atrybut na „ Kliknij ' wydarzenie:
konst przycisk = dokument. getElementById ( 'btn' ) ;przycisk. addEventListener ( 'Kliknij' , funkcja ( wydarzenie ) {
wydarzenie. cel . styl . kolor tła = 'niebieski' ;
} ) ;
Wyjście
Przykład 2: Uzyskaj wartość elementu docelowego
Utwórz pole tekstu wejściowego i obszar do wyświetlania tekstu za pomocą znacznika
. Przypisz identyfikatory do pola wejściowego i tagu
jako „ weźWejście ' I ' pokazywać ”, odpowiednio:
< typ wejścia = 'tekst' ID = „weź dane” >< identyfikator p = 'pokazywać' > P >
Uzyskaj odniesienie do pola tekstowego za pomocą „ getElementById() ' metoda:
było wejście = dokument. getElementById ( „weź dane” ) ;Użyj ' wartość ” atrybut z „ zdarzenie.cel ”, aby uzyskać wartość docelowego elementu:
wejście. addEventListener ( 'wejście' , ( wydarzenie ) => {dokument. getElementById ( 'pokazywać' ) . wewnętrzny HTML = wydarzenie. cel . wartość ;
} )
Jak widać, wartość wprowadzona w polu tekstowym została pomyślnie pobrana za pomocą „ wartość ' atrybut:
To było wszystko o „event.target” w JavaScript.
Wniosek
„ zdarzenie.cel ” odnosi się do elementu, który wyzwolił/zainicjował zdarzenie. Istnieje kilka atrybutów właściwości „event.target”, które dostarczają informacji o elemencie docelowym. Na przykład, ' nazwa.celu.zdarzenia.zmienna ”, „ .wartość ”, „ .ID ”, „ .styl ', i tak dalej. Ten post ilustruje „event.target”, jego atrybuty i użycie w JavaScript.