Paano Gayahin ang isang Pag-click Gamit ang JavaScript?
Maaaring ipatupad ang mga sumusunod na diskarte upang maglapat ng simulation ng pag-click sa JavaScript:
Diskarte 1: Gayahin ang isang Pag-click Gamit ang JavaScript Gamit ang onclick na Kaganapan
isang ' onclick Ang kaganapan ay nangyayari kapag pinindot ang pindutan. Maaaring ilapat ang diskarteng ito upang mag-invoke ng isang function sa pag-click ng button at dagdagan ang ' bilang ng pag-click ” sa tuwing pinindot ang button.
Side Note: isang ' onclick ” event ay maaaring ilapat lamang sa pamamagitan ng paglakip nito sa isang partikular na function.
Halimbawa
Pumunta sa sumusunod na code snippet:
< gitna >
< estilo ng h3 = 'kulay ng background: lightblue;' > I-click ang Simulated < span klase = 'bilang' > span > beses h3 >
< button id = 'btn1' onclick = 'countClick()' > Pindutin mo ako ! pindutan >
gitna >
- Isama ang tinukoy na heading kasama ng isang “ 'tag upang dagdagan ang ' bilangin ” ng mga pag-click.
- Sa susunod na hakbang, lumikha ng isang pindutan na may nakalakip na ' onclick ” event na nagre-redirect sa function countClick() na maa-access sa pag-click sa button.
Ngayon, dumaan tayo sa mga sumusunod na linya ng code ng JavaScript:
< iskrip >
hayaan ang mga pag-click = 0 ;
function countClick ( ) {
mga pag-click = mga pag-click + 1 ;
dokumento. querySelector ( '.bilang' ) . textContent = mga pag-click ;
}
iskrip >
Sa itaas na bahagi ng js ng code:
- Dito, simulan muna ang mga pag-click gamit ang ' 0 ”.
- Pagkatapos nito, ipahayag ang isang function na pinangalanang ' countClick() ”. Sa kahulugan nito, dagdagan ang inisyal na ' mga pag-click 'may' 1 ”. Magreresulta ito sa pagdaragdag ng bilang sa tuwing na-click ang pindutan.
- Panghuli, i-access ang ' span 'elemento gamit ang ' document.querySelector() ” paraan. Gayundin, ilapat ang ' textContent ” property upang ilaan ang nadagdag na bilang ng pag-click na tinalakay bago sa elemento ng span.
Ang magiging output ay ang mga sumusunod:
Ang functionality ng incremented timer sa bawat pag-click ay makikita sa output sa itaas.
Diskarte 2: Gayahin ang isang Pag-click Gamit ang JavaScript sa pamamagitan ng Paraan ng addEventListener().
Ang ' addEventListener() ” paraan ay naglalaan ng event handler sa isang elemento. Ang pamamaraang ito ay maaaring ipatupad sa pamamagitan ng pag-attach ng isang partikular na kaganapan sa isang elemento at pag-alerto sa user sa trigger ng kaganapan.
Syntax
elemento. addEventListener ( kaganapan, gawain )Sa ibinigay na syntax:
- “ kaganapan ” ay tumutukoy sa pangalan ng kaganapan.
- “ function ” ay tumuturo sa function na ipapatupad kapag nangyari ang kaganapan.
Halimbawa
Ipinapaliwanag ng ipinakitang demonstrasyon sa ibaba ang nakasaad na konsepto:
< gitna >< katawan >< isang href = '#' id = 'link' > I-click ang link a >
katawan > gitna >
< iskrip >
maging kambing = dokumento. getElementById ( 'link' ) ;
makuha. addEventListener ( 'click' , ( ) => alerto ( 'I-click ang Simulated!' ) )
iskrip >
Sa code sa itaas:
- Una, tukuyin ang isang ' anchor ” tag upang isama ang tinukoy na link
- Sa JavaScript na bahagi ng code, i-access ang ginawang link gamit ang “ document.getElementById() ” paraan.
- Panghuli, ilapat ang ' addEventListener() 'paraan sa na-access' link ”. Ang ' i-click ” na kaganapan ay naka-attach sa kasong ito na magreresulta sa pag-alerto sa gumagamit sa pag-click sa ginawang link.
Output
Diskarte 3: Gayahin ang isang Click Gamit ang JavaScript Gamit ang click() Method
Ang ' click() ” paraan ay gumaganap ng isang mouse-click simulation sa isang elemento. Ang pamamaraang ito ay maaaring gamitin upang gayahin ang isang pag-click nang direkta sa mga naka-attach na button gaya ng tinukoy ng pangalan.
Syntax
elemento. i-click ( )Sa ibinigay na syntax:
- “ elemento ” ay tumuturo sa elemento kung saan isasagawa ang pag-click.
Halimbawa
Ipinapaliwanag ng sumusunod na code snippet ang nakasaad na konsepto:
< gitna >< katawan >< h3 > Nahanap mo ba ito nakakatulong ang page ? h3 >
< button sa pag-click = 'simulateClick()' id = 'gayahin' > Oo pindutan >
< button sa pag-click = 'simulateClick()' id = 'gayahin' > Hindi pindutan >
< h3 id = 'ulo' istilo = 'kulay ng background: lightgreen;' > h3 >
katawan > gitna >
- Una, isama ang nakasaad na heading sa loob ng “
” tag. - Pagkatapos nito, lumikha ng dalawang magkaibang mga pindutan na may tinukoy na mga id.
- Gayundin, maglakip ng ' onclick ” kaganapan na may parehong invoking ang function simulateClick().
- Sa susunod na hakbang, magsama ng isa pang heading na may tinukoy na “ id ' upang maabisuhan ang user sa sandaling ang ' i-click ” ay kunwa.
Ngayon, dumaan sa mga linya ng JavaScript na ibinigay sa ibaba:
< iskrip >function simulateClick ( ) {
dokumento. getElementById ( 'gayahin' ) . i-click ( )
hayaan mo = dokumento. getElementById ( 'ulo' )
makuha. innerText = 'I-click ang Simulated!'
}
iskrip >
- Tukuyin ang isang function ' simulateClick() ”.
- Dito, i-access ang mga ginawang button gamit ang “ document.getElementById() 'paraan at ilapat ang ' click() ” paraan sa kanila.
- Ngayon, sa katulad na paraan, i-access ang inilalaan na heading at ilapat ang ' innerText ” property upang ipakita ang nakasaad na mensahe bilang isang heading sa simulate na pag-click.
Output
Sa output sa itaas, maliwanag na ang parehong nilikha na mga pindutan ay ginagaya ang pag-click.
Ipinapakita ng blog na ito kung paano maglapat ng simulation ng pag-click gamit ang JavaScript.
Konklusyon
isang ' onclick 'kaganapan, ang' addEventListener() 'paraan, o ang' click() ” paraan ay maaaring gamitin upang gayahin ang isang pag-click gamit ang JavaScript. isang ' onclick ” na kaganapan ay maaaring ilapat upang gayahin ang isang pag-click sa bawat oras na ang pindutan ay na-click sa anyo ng isang counter. Ang ' addEventListener() ” paraan ay maaaring gamitin upang mag-attach ng kaganapan sa link at abisuhan ang user sa simulation ng pag-click. Ang ' click() ” paraan ay maaaring ilapat sa nilikha na mga pindutan at gumaganap ng kinakailangang pag-andar para sa bawat isa sa mga pindutan. Ipinapaliwanag ng write-up na ito kung paano mag-apply ng click simulation sa JavaScript.