A kattintásra esemény általában akkor következik be, amikor a felhasználó egy elemre kattint. Lehetővé teszi a programozó számára, hogy végrehajtsa a JavaScript funkcióját, amikor egy elemre kattintanak. Ez az esemény felhasználható egy űrlap érvényesítésére, figyelmeztető üzenetekre és még sok másra.
JavaScript használatával ez az esemény dinamikusan hozzáadható bármely elemhez. Támogatja az összes HTML elemet, kivéve , , , , , , , ,
, , és . Ez azt jelenti, hogy nem alkalmazhatjuk a kattintásra esemény a megadott címkéken.
HTML-ben használhatjuk a kattintásra attribútumot és hozzárendelni a JavaScript függvény hozzá. Használhatjuk a JavaScriptet is addEventListener() módszer és passz a kattintson eseményt a nagyobb rugalmasság érdekében.
ha rudyard kiplinggel sorról sorra magyarázatot
Szintaxis
Most látjuk a használatának szintaxisát kattintásra esemény HTML-ben és in javascript (nélkül addEventListener() módszerrel vagy a addEventListener() módszer).
HTML-ben
JavaScriptben
object.onclick = function() { myScript }; JavaScriptben az addEventListener() metódus használatával
object.addEventListener('click', myScript);
Lássuk, hogyan kell használni kattintásra esemény néhány illusztráció segítségével. Most látni fogjuk a példákat a kattintásra esemény HTML-ben és JavaScriptben.
1. példa – Onclick attribútum használata HTML-ben
Ebben a példában a HTML kattintásra attribútumot, és hozzárendel egy JavaScript függvényt. Amikor a felhasználó rákattint az adott gombra, a megfelelő funkció végrehajtásra kerül, és egy figyelmeztető párbeszédpanel jelenik meg a képernyőn.
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 Tesztelje most Kimenet
Az adott gombra kattintás után a kimenet a következő lesz:
2. példa – JavaScript használata
Ebben a példában JavaScriptet használunk kattintásra esemény. Itt használjuk a kattintásra esemény a bekezdés elemmel.
Amikor a felhasználó rákattint a bekezdéselemre, a megfelelő függvény végrehajtásra kerül, és a bekezdés szövege megváltozik. A gombra kattintva tömblista rendezése java
elem, a szöveg háttérszíne , mérete, szegélye és színe is módosul.
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'; } Tesztelje most Kimenet
amplitúdó moduláció
A szövegre kattintás után Kattints ide, a kimenet a következő lesz
3. példa - AddEventListener() metódus használata
Ebben a példában JavaScriptet használunk addEventListener() rögzítési módszer a kattintson eseményt a bekezdés elemhez. Amikor a felhasználó a bekezdéselemre kattint, a bekezdés szövege megváltozik.
A bekezdésre kattintva az elemek háttérszíne és betűmérete is megváltozik.
<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'; } Tesztelje most Kimenet
A szövegre kattintva Kattints ide , a kimenet a következő lesz
