Ten przewodnik pokaże cel i działanie zdarzenia „onchange” w JavaScript.
Jak używać zdarzenia „onchange” w JavaScript?
„ na zmianę Zdarzenie aktywuje się, gdy zmieni się wartość określonego elementu HTML. Po wyzwoleniu tego zdarzenia powiązana funkcja JavaScript jest wykonywana w celu wykonania określonego zadania.
Składnia
obiekt. na zmianę = funkcjonować ( ) { mójSkrypt } ;
W powyższej składni:
- element: Oznacza konkretny element HTML.
- funkcjonować(): Reprezentuje zdefiniowaną funkcję, która zostanie wywołana po wyzwoleniu zdarzenia.
- mójSkrypt: Odnosi się do definicji funkcji JavaScript, która wykonuje określone zadanie, gdy wystąpi zdarzenie „onchange”.
Składnia (z metodą „addEventListener()”)
obiekt. addEventListener ( 'zmiana' , mój Skrypt ) ;
W powyższej składni „ addEventListener() metoda „wykorzystuje” na zmianę ”, aby wykonać funkcję JavaScript do wykonywania różnych zadań.
Przykład 1: Zastosowanie zdarzenia „onchange” do wyświetlenia wybranej wartości przy użyciu podstawowej składni
W tym scenariuszu zdarzenie „onchange” jest powiązane z listą opcji w celu wyświetlenia zmienionej wartości opcji i wywołania odpowiedniej funkcji JavaScript.
Kod HTML
Spójrz na następujący kod HTML:
< h2 > na zmianę Wydarzenie w JavaScript h2 >< P > Wybierz inny język z listy. P >
< wybierz identyfikator = 'próbny' na zmianę = 'Próbka()' >
< Wartość opcji = „HTML” > HTML opcja >
< Wartość opcji = „CSS” > CSS opcja >
< Wartość opcji = „JavaScript” > JavaScript opcja >
wybierać >
< identyfikator p = „P1” > P >
W powyższym kodzie:
- Najpierw zdefiniuj podtytuł za pomocą „ ”znacznik.
- Następnie dodaj akapit z podanym stwierdzeniem.
- Następnie „
Tag ” tworzy listę rozwijaną z przypisanym identyfikatorem ” próbny ” i „ na zmianę ” zdarzenie przekierowuje do funkcji „ Próbka() ”, odpowiednio. - W treści znacznika „
- Na koniec tworzony jest pusty akapit z identyfikatorem „ P1 ”, aby wyświetlić wybraną/zmienioną wartość z listy opcji.
Kod JavaScript
Teraz omówienie następującego kodu JavaScript:
< scenariusz >funkcja Próbka ( ) {
Gdzie = dokument. getElementById ( 'próbny' ) . wartość ;
dokument. getElementById ( „P1” ) . wewnętrzny HTML = „Wybrana opcja to:” + T ;
}
scenariusz >
W powyższym bloku kodu:
- Przede wszystkim zadeklaruj funkcję o nazwie „ Próbka() ”.
- W jego definicji należy zastosować „ getElementById() ”, aby uzyskać dostęp do wartości wybranej opcji z listy opcji za pomocą opcji „ wartość ' nieruchomość.
- Na koniec wyświetl wartość za pomocą „ wewnętrzny HTML ' nieruchomość.
Wyjście
Jak widać na danych wyjściowych, po wybraniu opcji z listy rozwijanej zdarzenie „onchange” wyzwala i wywołuje odpowiednią funkcję.
Przykład 2: Zastosowanie zdarzenia „onchange” do zmiany tekstu pola wejściowego pisanego wielkimi literami przy użyciu składni metody „addEventListener()”
W tym przykładzie wyjaśniono działanie zdarzenia „onchange” poprzez zmianę pola tekstu wejściowego na „wielkie litery” za pomocą metody „addEventListener()”.
Kod HTML
Najpierw przejrzyj poniższy kod HTML:
< h2 > na zmianę Wydarzenie w JavaScript h2 >Nazwa : < typ wejścia = 'tekst' ID = 'próbny' >
< przycisk > Składać przycisk >
W powyższym kodzie HTML:
- Zdefiniuj podtytuł poziomu 2 za pomocą „ ”znacznik.
- Następnie dodaj „
” pole przy etykiecie „ Nazwa ', Typ zawartości ' tekst ” i powiązany identyfikator „ próbny ”, odpowiednio. - Na koniec dołącz przycisk używający „
”znacznik.
Kod JavaScript
Następnie spójrz na następujący kod JavaScript:
< scenariusz >dokument. getElementById ( 'próbny' ) . addEventListener ( 'zmiana' , Próbka ) ;
funkcja Próbka ( ) {
Gdzie = dokument. getElementById ( 'próbny' ) ;
T. wartość = T. wartość . na wielkie litery ( ) ;
}
scenariusz >
W tym bloku kodu:
- Po pierwsze ' document.getElementById() metoda „wykorzystuje” zmiana ” zdarzenie, które spowoduje zmianę wartości wejściowego pola tekstowego o id ” próbny ” po kliknięciu przycisku.
- Następnie definiowana jest funkcja „Sample()”, która wykorzystuje metodę „document.getElementById()” w celu uzyskania dostępu do pola tekstowego „demo”, a następnie zmienia swoją wartość na „wielkie litery” za pomocą „ Duże litery() ' metoda.
Wyjście
Jak widać, tekst wejściowy został przekonwertowany na wielkie litery po kliknięciu przycisku.
Wniosek
JavaScript oferuje powszechnie używane „ na zmianę ” zdarzenie, które jest wyzwalane, gdy tylko zmieni się stan wartości danego elementu. Jest podobny do „ na wejściu ”, ale „oninput” pojawia się natychmiast, gdy zmienia się wartość, podczas gdy zdarzenie „onchange” jest wyzwalane, gdy wartość zdarzenia traci ostrość. Ten przewodnik zademonstrował cel, działanie i użycie zdarzenia „onchange” w JavaScript.