Tento článok stručne ukazuje, čo je metóda „click()“ prvku DOM a ako ju používať v HTML?
Čo je metóda „click()“ prvku DOM v HTML?
Keď sa metóda click() zavolá na prvok HTML, simuluje kliknutie používateľa myšou na prvok, čo následne spustí všetky pripojené obsluhy udalostí. To umožňuje vývojárom vykonávať niekoľko interaktívnych akcií, ako je otváranie odkazov, odosielanie formulárov alebo prepínanie viditeľnosti prvkov bez potreby fyzického kliknutia myšou. To pomáha vytvárať interaktívne a responzívne webové stránky.
Ako používať metódu „click()“ prvku DOM v HTML?
Ak chcete použiť metódu click(), používatelia musia najprv získať odkaz na prvok HTML, aby simulovali kliknutie. Dá sa to urobiť pomocou ktorejkoľvek zo štandardných metód prechodu DOM alebo dotazu, ako napríklad „ getElementById “, “ getElementsByClassName “, “ querySelector “, alebo „ querySelectorAll “.
Prejdeme si príklad pre lepšie vysvetlenie metódy „click()“.
Príklad: HTML Checkbox a Radio Button Elements
Uvažuje sa príklad, v ktorom „ klikni() ” sa používa s prvkami začiarkavacieho políčka HTML a prepínača. Postupujte podľa nižšie uvedeného kódu:
< formulár >
< vstup
typu = 'zaškrtávacie políčko'
id = 'checkbox1'
onmouseover = 'forCheckbox()'
>
Beží na Linuxhint
< vstup
typu = 'rádio'
id = 'tlačítko na Rádiu'
onmouseover = 'forRadio()'
>
Beží na Linuxhint
< / formulár >
Vo vyššie uvedenom útržku kódu:
- Najprv sa na webovej stránke vytvorí začiarkavacie políčko pomocou značky s typom nastaveným na „ začiarkavacie políčko “.
- Potom poslucháč udalosti „ onmouseover “ je pripojený k začiarkavaciemu políčku a vyvoláva „ forCheckbox() “.
- Rovnakým spôsobom „ rádio Tlačidlo “ sa vytvorí pomocou tlačidla “
” a k nej je pripojený prijímač udalostí. Tentoraz však „ forRadio() ” je vyvolaná funkcia.
Po vytvorení prvku HTML na webovej stránke je teraz čas pridať „ klikni() “ metóda:
< skript >
funkcia pre začiarkavacie políčko ( ) {
document.getElementById ( 'checkbox1' ) .kliknite ( ) ;
}
funkcia pre Rádio ( ) {
document.getElementById ( 'tlačítko na Rádiu' ) .kliknite ( ) ;
}
< / skript >
Vo vyššie uvedenom útržku kódu:
- Najprv definujte dve funkcie JavaScript, “ forCheckbox() “ a „ forRadio() “.
- Tieto funkcie využívajú „ document.getElementById() ” na získanie odkazov na elementy HTML na stránke so špecifickými ID “checkbox1” a “radioButton”.
- Na simuláciu kliknutia na HTML element sa používa metóda click(). Táto funkcia prepína stav zapnutia alebo vypnutia, keď je volaná.
Po vykonaní vyššie uvedených útržkov kódu sa výstup zobrazí takto:
Vyššie uvedený gif ilustruje, že stav začiarkavacieho políčka a prepínača sa mení pomocou metódy „click()“.
Záver
Metóda click() je obzvlášť užitočná na spracovanie používateľských interakcií s webovou stránkou prostredníctvom JavaScriptu.
Namiesto toho, aby ste sa spoliehali na to, že používateľ fyzicky klikne na prvok, použite metódu click() na programovú simuláciu udalosti kliknutia. Je užitočný na vytváranie interaktívnych a užívateľsky prívetivých návrhov. Tento článok úspešne demonštroval význam metódy „click()“ prvku DOM v HTML.