Hoe een klik simuleren met JavaScript?
De volgende benaderingen kunnen worden geïmplementeerd om een kliksimulatie in JavaScript toe te passen:
Benadering 1: Simuleer een klik met JavaScript met behulp van de onclick-gebeurtenis
Een ' bij klikken ”-gebeurtenis vindt plaats wanneer de knop wordt ingedrukt. Deze aanpak kan worden toegepast om een functie aan te roepen bij het klikken op de knop en de ' aantal klikken ” elke keer dat er op de knop wordt geklikt.
Kanttekening: Een ' bij klikken ”-gebeurtenis kan eenvoudig worden toegepast door het aan een bepaalde functie te koppelen.
Voorbeeld
Doorloop het volgende codefragment:
< centrum >
< h3-stijl = 'achtergrondkleur: lichtblauw;' > Klik op Gesimuleerd < span klas = 'graaf' > span > keer h3 >
< knop-id = 'btn1' bij klikken = 'telKlik()' > Klik hier ! knop >
centrum >
- Voeg de gespecificeerde kop samen met een ' ” tag om de “ graaf ” van klikken.
- Maak in de volgende stap een knop met een bijgevoegde ' bij klikken ”-gebeurtenis die doorverwijst naar de functie countClick() die toegankelijk is na het klikken op de knop.
Laten we nu de volgende JavaScript-coderegels doornemen:
< script >
laat klikken = 0 ;
functie countClick ( ) {
klikken = klikken + 1 ;
document. querySelector ( '.graaf' ) . tekstInhoud = klikken ;
}
script >
In het bovenstaande js-gedeelte van de code:
- Initialiseer hier eerst de klikken met ' 0 ”.
- Declareer daarna een functie met de naam ' telKlik() ”. Verhoog in zijn definitie de geïnitialiseerde ' klikken ' met ' 1 ”. Dit zal resulteren in het verhogen van de telling telkens wanneer op de knop wordt geklikt.
- Ga ten slotte naar de ' span ” element met behulp van de “ document.querySelector() ” methode. Pas ook de “ tekstInhoud ” eigenschap om het verhoogde aantal klikken toe te wijzen dat eerder is besproken aan het span-element.
De uitvoer zal als volgt zijn:
De functionaliteit van de opgehoogde timer bij elke klik is te zien in de bovenstaande uitvoer.
Benadering 2: Simuleer een klik met JavaScript via de addEventListener()-methode
De ' addEventListener() ” methode wijst een gebeurtenishandler toe aan een element. Deze methode kan worden geïmplementeerd door een specifieke gebeurtenis aan een element te koppelen en de gebruiker te waarschuwen wanneer de gebeurtenis wordt geactiveerd.
Syntaxis
element. addEventListener ( gebeurtenis, functie )In de gegeven syntaxis:
- “ evenement ” verwijst naar de naam van het evenement.
- “ functie ” verwijst naar de functie die moet worden uitgevoerd wanneer de gebeurtenis plaatsvindt.
Voorbeeld
De onderstaande demonstratie legt het vermelde concept uit:
< centrum >< lichaam >< een href = '#' ID kaart = 'koppeling' > Klik De link a >
lichaam > centrum >
< script >
geit zijn = document. getElementById ( 'koppeling' ) ;
krijgen. addEventListener ( 'Klik' , ( ) => alarm ( 'Klik gesimuleerd!' ) )
script >
In bovenstaande code:
- Geef eerst een ' anker ”-tag om de opgegeven link op te nemen
- Open in het JavaScript-gedeelte van de code de gemaakte link met behulp van de ' document.getElementById() ” methode.
- Pas ten slotte de ' addEventListener() 'methode naar de geopende' koppeling ”. De ' Klik ”-gebeurtenis is in dit geval bijgevoegd, wat ertoe zal leiden dat de gebruiker wordt gewaarschuwd wanneer hij op de gemaakte link klikt.
Uitgang
Benadering 3: Simuleer een klik met JavaScript met behulp van de click()-methode
De ' Klik() ” methode voert een muiskliksimulatie uit op een element. Deze methode kan worden gebruikt om een klik rechtstreeks op de gekoppelde knoppen te simuleren, zoals de naam aangeeft.
Syntaxis
element. Klik ( )In de gegeven syntaxis:
- “ element ” wijst naar het element waarop de klik zal worden uitgevoerd.
Voorbeeld
Het volgende codefragment legt het genoemde concept uit:
< centrum >< lichaam >< h3 > Heb je gevonden deze pagina nuttig ? h3 >
< knop opklik = 'simuleerKlik()' ID kaart = 'simuleren' > Ja knop >
< knop opklik = 'simuleerKlik()' ID kaart = 'simuleren' > Nee knop >
< h3 tel = 'hoofd' stijl = 'achtergrondkleur: lichtgroen;' > h3 >
lichaam > centrum >
- Neem eerst de vermelde kop op in de '
' label. - Maak daarna twee verschillende knoppen met de opgegeven id's.
- Voeg ook een ' bij klikken ”gebeurtenis waarbij beide de functie simulationClick() aanroepen.
- Voeg in de volgende stap een andere kop toe met de opgegeven ' ID kaart ” om de gebruiker op de hoogte te stellen zodra de “ Klik ” wordt gesimuleerd.
Doorloop nu de onderstaande JavaScript-regels:
< script >functie simulerenKlik ( ) {
document. getElementById ( 'simuleren' ) . Klik ( )
laat halen = document. getElementById ( 'hoofd' )
krijgen. binnentekst = 'Klik gesimuleerd!'
}
script >
- Definieer een functie “ simulerenKlik() ”.
- Hier krijgt u toegang tot de gemaakte knoppen met behulp van de ' document.getElementById() ” methode en pas de “ Klik() methode voor hen.
- Ga nu op dezelfde manier naar de toegewezen kop en pas de ' binnentekst ” eigenschap om het vermelde bericht als kop weer te geven bij de gesimuleerde klik.
Uitgang:
In de bovenstaande uitvoer is het duidelijk dat beide gemaakte knoppen de klik simuleren.
Deze blog laat zien hoe je een kliksimulatie toepast met JavaScript.
Conclusie
Een ' bij klikken ” evenement, de “ addEventListener() ”-methode, of de “ Klik() ”-methode kan worden gebruikt om een klik met JavaScript te simuleren. Een ' bij klikken ” kan worden toegepast om een klik te simuleren telkens wanneer op de knop wordt geklikt in de vorm van een teller. De ' addEventListener() ” kan worden gebruikt om een gebeurtenis aan de link toe te voegen en de gebruiker op de hoogte te stellen van de kliksimulatie. De ' Klik() ” kan worden toegepast op de gemaakte knoppen en voert de vereiste functionaliteit uit voor elk van de knoppen. In dit artikel wordt uitgelegd hoe u een kliksimulatie in JavaScript toepast.