Tento tutoriál bude definovat postup, jak nastavit onClick pomocí JavaScriptu.
Jak nastavit onClick pomocí JavaScriptu
Chcete-li nastavit při kliknutí s JavaScriptem existují dvě různé metody, které jsou:
- První metodou je přiřazení hodnoty prvku HTML při kliknutí atribut pomocí JavaScriptu.
- Druhou metodou je explicitně přidat posluchač události do události HTML, která kontroluje „ klikněte ' událost.
Příklad 1: Přiřaďte hodnotu atributu onclick prvku HTML pomocí JavaScriptu
V souboru HTML vytvořte nadpis a tlačítko „ Klikni na mě “s id” js “, který při kliknutí na něj spustí funkci JavaScript.
< h2 > Soubor vlastnost onClick s JavaScriptem h2 >
< ID tlačítka = 'js' > Klikni na mě knoflík >
V následujícím kroku se zpřístupní vytvořené tlačítko a zobrazí se „ při kliknutí bude k němu připojen atribut ”. Po kliknutí na tlačítko se provede zadaná funkce a zobrazí se „ styl.barva pozadí Vlastnost ” změní barvu tlačítka následovně:
dokument. getElementById ( 'js' ) . při kliknutí = funkce jsFunc ( ) {
dokument. getElementById ( 'js' ) . styl . barva pozadí = 'Nachový' ;
}
Odpovídající výstup bude:
Příklad 2: Explicitně přidejte posluchač událostí do události HTML
Vytvořte tlačítko ' Klikněte zde! “ a přiřadí id „ událost ” to spustí metodu addEventListener() na 'kliknout' událost:
< ID tlačítka = 'událost' > Klikněte zde ! silný > knoflík silný >>
Vyzvedněte tlačítko pomocí jeho id a poté připojte „ addEventListener() “ metodou předáním “ klikněte 'událost a funkce' eventFunc ” kde se změní barva pozadí tlačítka:
dokument. getElementById ( 'událost' ) . addEventListener ( 'kliknout' , eventFunc ) ;funkce eventFunc ( ) {
dokument. getElementById ( 'událost' ) . styl . barva pozadí = 'Zelená' ;
}
Výstup
Příklad 3: Použití všech metod onClick najednou
V tomto příkladu se zobrazí fungování všech metod najednou. První je výchozí způsob přidání atributu onclick do samotného HTML tagu. Poté byly ukázány i dva způsoby nastavení atributu onclick pomocí JavaScriptu.
V následujícím příkladu vytvořte tři tlačítka a prohlédněte si funkčnost atributu onclick.
- První tlačítko ' Klikněte “ bude volat „ htmlFunc() “ na události kliknutí.
- Tlačítko ' Klikni na mě ” bude zpřístupněno s přiděleným id” js ” a poté pomocí JavaScriptu přiřaďte hodnotu atributu onclick tlačítka.
- Tlačítko ' Klikněte zde! “ bude přístupný pomocí id “ událost “ a poté připojte „ addEventListener() “ metoda s tím:
< ID tlačítka = 'js' > Klikni na mě knoflík < br < br >
< ID tlačítka = 'událost' > Klikněte zde ! knoflík >
Níže uvedená funkce spustí „ při kliknutí 'událost tlačítka' Klikněte “:
funkce htmlFunc ( ) {upozornění ( 'Tlačítko, na které klikla událost HTML onClick' ) ;
}
Po kliknutí na „ Klikni na mě “, spustí se následující funkce, kde se zobrazí varovná zpráva.
dokument. getElementById ( 'js' ) . při kliknutí = funkce jsFunc ( ) {upozornění ( 'Tlačítko, na které klikla funkce JavaScript onClick' ) ;
}
Daná funkce spustí tlačítko „ Klikněte zde! “:
dokument. getElementById ( 'událost' ) . addEventListener ( 'kliknout' , eventFunc ) ;funkce eventFunc ( ) {
upozornění ( 'Tlačítko, na které kliknul JavaScript onClick s metodou EventListener' ) ;
}
Výstup zobrazí výstražné zprávy při každém kliknutí na tlačítko:
Závěr
Chcete-li nastavit onclick pomocí JavaScriptu, existují dva různé přístupy, prvním je přiřadit hodnotu atributu onclick prvku HTML pomocí JavaScriptu a druhým přístupem je explicitně přidat posluchač události do události HTML, který kontroluje „ klikněte ' událost. Tento tutoriál definoval metody nastavení onClick pomocí JavaScriptu spolu s příklady.