De onclick händelse inträffar vanligtvis när användaren klickar på ett element. Det tillåter programmeraren att köra en JavaScript-funktion när ett element klickas. Denna händelse kan användas för att validera ett formulär, varningsmeddelanden och många fler.
Med hjälp av JavaScript kan denna händelse läggas till dynamiskt i alla element. Den stöder alla HTML-element utom , , , , , , , ,
, , och . Det betyder att vi inte kan tillämpa onclick händelse på de givna taggarna.
I HTML kan vi använda onclick attribut och tilldela en JavaScript-funktion till det. Vi kan också använda JavaScript addEventListener() metod och godkänt a klick evenemang till det för större flexibilitet.
Syntax
Nu ser vi syntaxen för att använda onclick händelse i HTML och in javascript (utan addEventListener() metod eller genom att använda addEventListener() metod).
I HTML
I JavaScript
object.onclick = function() { myScript }; I JavaScript med hjälp av addEventListener()-metoden
object.addEventListener('click', myScript);
Låt oss se hur man använder onclick händelse genom att använda några illustrationer. Nu kommer vi att se exemplen på att använda onclick händelse i HTML och i JavaScript.
.04 som en bråkdel
Exempel 1 - Använda onclick-attribut i HTML
I det här exemplet använder vi HTML onclick attribut och tilldela en JavaScript-funktion till den. När användaren klickar på den givna knappen kommer motsvarande funktion att exekveras och en varningsdialogruta visas på skärmen.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Testa det nu Produktion
Efter att ha klickat på den givna knappen kommer utgången att vara -
Exempel 2 - Använda JavaScript
I det här exemplet använder vi JavaScript onclick händelse. Här använder vi onclick händelse med paragrafelementet.
När användaren klickar på styckeelementet kommer motsvarande funktion att köras och texten i stycket ändras. När du klickar på element, bakgrundsfärg, storlek, ram och färg på texten kommer också att ändras.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testa det nu Produktion
Efter att ha klickat på texten Klicka här, utgången blir -
Exempel 3 - Använder metoden addEventListener().
I det här exemplet använder vi JavaScript addEventListener() sätt att fästa en klick händelse till paragrafelementet. När användaren klickar på styckeelementet ändras texten i stycket.
När du klickar på stycket ändras även bakgrundsfärgen och teckenstorleken på elementen.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Testa det nu Produktion
När man klickar på texten Klicka här , utgången blir -
