JavaScript addEventListener() su pavyzdžiais

JavaScript addEventListener() su pavyzdžiais

The addEventListener() metodas EventTarget sąsaja nustato funkciją, kuri bus iškviečiama kiekvieną kartą, kai nurodytas įvykis bus pristatytas į tikslą. Šis metodas leidžia naudoti kelis elemento įvykių tvarkykles, įgalindamas dinamišką ir lankstų sąveikos valdymą žiniatinklio programose.

Sintaksė:

element.addEventListener(event, listener, useCapture); 

Parametrai:

  • įvykis: įvykis gali būti bet koks galiojantis JavaScript įvykis. Įvykiai naudojami be priešdėlių, pavyzdžiui, paspaudimas vietoj onclick arba mousedown vietoj onmousedown.
  • klausytojas (tvarkyklės funkcija): Tai gali būti JavaScript funkcija, kuri reaguoja į įvykį.
  • useCapture: Tai pasirenkamas parametras, naudojamas įvykių plitimui valdyti. Būlio reikšmė perduodama kur tiesa žymi fiksavimo fazę ir klaidinga žymi burbuliavimo fazę.

1 pavyzdys: Šiame pavyzdyje mes pateiksime tekstą tinklalapyje spustelėję mygtuką.



HTML Dokumento pavadinimas> galva> <body> <button id='try'>Spustelėkite čia mygtuką> <h1 id='text'>h1> <script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> body> html>>> </tag> <p dir='ltr'> <b> <strong>Išvestis: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt='JavaScript addEventListener() su pavyzdžiais'> <p>JavaScript addEventListener() su pavyzdžiais </p> <p dir='ltr'> <br> <b> <strong>2 pavyzdys: </strong> </b> <span>Šiame pavyzdyje prie to paties elemento pridedami du įvykiai, užvedę pelės žymeklį ir nuvedę pelės žymeklį. Jei virš teksto užvedamas pelės žymeklis, įvyksta pelės žymeklio užvedimo įvykis ir iškviečiama funkcija „RespondMouseOver“, panašiai ir užvedus pelės žymeklį, iškviečiama funkcija „RespondMouseOut“. </span> </p>HTML <tag data-text-1=' <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Dokumento pavadinimas> galva> <body> <button id='clickIt'>Spustelėkite čia mygtuką> <p id='hoverPara'>Užveskite pelės žymeklį virš šio teksto !p> <b id='effect'>b> <script>const x = document.getElementById('clickIt'); const y = document.getElementById('hoverPara'); x.addEventListener('click', RespondClick); y.addEventListener('mouseover', RespondMouseOver); y.addEventListener('mouseout', RespondMouseOut); function RespondMouseOver() { document.getElementById('effect').innerHTML += 'MouseOver Event' + ' '; } function RespondMouseOut() { document.getElementById('effect').innerHTML += 'MouseOut Event' + ' '; } function RespondClick() { document.getElementById('effect').innerHTML += 'Spustelėjimo įvykis' + ' '; } scenarijus> body> html>>> </tag> <p dir='ltr'> <b> <strong>Išvestis: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt='JavaScript addEventListener() su pavyzdžiais'> <p>JavaScript addEventListener() su pavyzdžiais </p> <br> <br> </div> <!-- Article Footer with Prominent Share Buttons --> <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6"> <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2"> <i class="fa fa-share-alt text-tech-500"> </i> Bendrinti </h4> <div class="flex flex-wrap justify-center gap-3"> <!-- Twitter --> <a href="https://twitter.com/intent/tweet?text=JavaScript addEventListener() su pavyzdžiais&url=https://www.techcodeview.com/lt/javascript-addeventlistener-with-examples" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-twitter text-lg"> </i> <span class="hidden sm:inline">Twitter </span> </a> <!-- Facebook --> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/lt/javascript-addeventlistener-with-examples" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-facebook text-lg"> </i> <span class="hidden sm:inline">Facebook </span> </a> <!-- LinkedIn --> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/lt/javascript-addeventlistener-with-examples&title=JavaScript addEventListener() su pavyzdžiais" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm"> <i class="fa fa-linkedin text-lg"> </i> <span class="hidden sm:inline">LinkedIn </span> </a> </div> </div> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- Comments Placeholder / Random Articles --> <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm"> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2"> Jums Gali Patikti </h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="group"> <a href="/lt/d-flip-flop" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/it-problems-solutions/32/d-flip-flop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="D Flip Flop" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/lt/d-flip-flop">D Flip Flop </a> </h4> </div> <div class="group"> <a href="/lt/80-colleges-with-full-ride-scholarships-131532" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3"> <img loading="lazy" src="https://techcodeview.com/img/blog/17/80-colleges-with-full-ride-scholarships.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="80 koledžų su visapusiškomis stipendijomis" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> </a> <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors"> <a href="/lt/80-colleges-with-full-ride-scholarships-131532">80 koledžų su visapusiškomis stipendijomis </a> </h4> </div> </div> </div> </div> <!-- SECONDARY COLUMN (SIDEBAR) --> <!-- Aside Column --> <div class="lg:col-span-4 space-y-8"> <!-- Best Articles Widget --> <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center"> <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span> Top Straipsniai </h2> </div> <!-- Owl Carousel Preserved Container --> <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav"> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/what-is-an-epilogue-definition-1311510"> <img src="https://techcodeview.com/img/blog/75/what-is-an-epilogue-definition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas yra epilogas? Apibrėžimas ir pavyzdžiai" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/what-is-an-epilogue-definition-1311510" class="hover:text-tech-500 transition-colors line-clamp-3">Kas yra epilogas? Apibrėžimas ir pavyzdžiai </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/python-new-line"> <img src="https://techcodeview.com/img/python-tutorial/85/python-new-line.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Python nauja eilutė" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/python-new-line" class="hover:text-tech-500 transition-colors line-clamp-3">Python nauja eilutė </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/types-exception-java"> <img src="https://techcodeview.com/img/java-tutorial/48/types-exception-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="„Java“ išimčių tipai" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/types-exception-java" class="hover:text-tech-500 transition-colors line-clamp-3">„Java“ išimčių tipai </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/canceled-cancelled-which-one-is-correct"> <img src="https://techcodeview.com/img/banking-english/73/canceled-cancelled-which-one-is-correct.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Atšaukta ar atšaukta – kuris iš jų yra teisingas?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/canceled-cancelled-which-one-is-correct" class="hover:text-tech-500 transition-colors line-clamp-3">Atšaukta ar atšaukta – kuris iš jų yra teisingas? </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/method-overriding-python"> <img src="https://techcodeview.com/img/python-oop/63/method-overriding-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Metodo nepaisymas Python" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/method-overriding-python" class="hover:text-tech-500 transition-colors line-clamp-3">Metodo nepaisymas Python </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/how-should-you-spend-night-before-sat-131794"> <img src="https://techcodeview.com/img/blog/44/how-should-you-spend-night-before-sat.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip turėtumėte praleisti naktį prieš SAT?" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/how-should-you-spend-night-before-sat-131794" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip turėtumėte praleisti naktį prieš SAT? </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/ultimate-college-majors-list-131556"> <img src="https://techcodeview.com/img/blog/57/ultimate-college-majors-list.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Galutinis koledžo pagrindinių dalykų sąrašas: 295 laipsniai, į kuriuos reikia atsižvelgti" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/ultimate-college-majors-list-131556" class="hover:text-tech-500 transition-colors line-clamp-3">Galutinis koledžo pagrindinių dalykų sąrašas: 295 laipsniai, į kuriuos reikia atsižvelgti </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/command-line-arguments-python"> <img src="https://techcodeview.com/img/python-utility/66/command-line-arguments-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Komandinės eilutės argumentai Python" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/command-line-arguments-python" class="hover:text-tech-500 transition-colors line-clamp-3">Komandinės eilutės argumentai Python </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/hyperparameters-machine-learning"> <img src="https://techcodeview.com/img/machine-learning/28/hyperparameters-machine-learning.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mašininio mokymosi hiperparametrai" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/hyperparameters-machine-learning" class="hover:text-tech-500 transition-colors line-clamp-3">Mašininio mokymosi hiperparametrai </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors"> <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"> <a href="/lt/how-improve-act-science-scores-1311594"> <img src="https://techcodeview.com/img/blog/70/how-improve-act-science-scores.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip pagerinti ACT mokslo balus: 7 tobulo balų surinkėjo patarimai" class="w-full h-full object-cover"> </a> </div> <div class="flex-1 min-w-0"> <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug"> <a href="/lt/how-improve-act-science-scores-1311594" class="hover:text-tech-500 transition-colors line-clamp-3">Kaip pagerinti ACT mokslo balus: 7 tobulo balų surinkėjo patarimai </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> </div> <!-- Categories --> <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategorija </h2> </div> <div class="flex flex-wrap gap-2"> <a href="/lt/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Dienoraštis </a> <a href="/lt/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java Konvertavimas </a> <a href="/lt/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Matematika </a> <a href="/lt/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java Kolekcijos </a> <a href="/lt/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Skirtumai </a> <a href="/lt/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors"> Java Eilutė </a> </div> <!-- Interesting Articles Widget --> <div class="mt-8"> <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2"> <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Įdomios Straipsniai </h2> </div> <div id="owl-carousel-4" class="owl-carousel owl-theme"> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/python/38/download-install-python-3-latest-version.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Atsisiųskite ir įdiekite Python 3 naujausią versiją" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/python/">Pitonas </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/download-install-python-3-latest-version">Atsisiųskite ir įdiekite Python 3 naujausią versiją </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/get-informed/40/explained-what-is-vsco.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Paaiškinta: kas yra VSCO?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/get-informed/">Gaukite Informaciją </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/explained-what-is-vsco-24212">Paaiškinta: kas yra VSCO? </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/ms-word-tutorial/76/how-insert-line-word.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaip įterpti eilutę į Word" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/ms-word-tutorial/">Ms Word Pamoka </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/how-insert-line-word">Kaip įterpti eilutę į Word </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/groovy-tutorial/84/apache-groovy-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Apache Groovy pamoka" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/groovy-tutorial/">Groovy Pamoka </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/apache-groovy-tutorial">Apache Groovy pamoka </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/mst/91/what-is-minimum-spanning-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kas yra minimalus besitęsiantis medis (MST)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/mst/">Mst </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/what-is-minimum-spanning-tree">Kas yra minimalus besitęsiantis medis (MST) </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> <!-- ARTICLE --> <article class="relative aspect-video rounded-lg overflow-hidden group mb-2"> <div class="absolute inset-0"> <img src="https://techcodeview.com/img/blog/53/is-ap-world-history-hard.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ar AP pasaulio istorija yra sunki? Ekspertų diskusija" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div> </div> <div class="absolute bottom-0 left-0 p-4"> <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/lt/blog/">Dienoraštis </a> </div> <h4 class="text-sm font-bold text-white leading-tight"> <a href="/lt/is-ap-world-history-hard-1311496">Ar AP pasaulio istorija yra sunki? Ekspertų diskusija </a> </h4> </div> </article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> <!-- /ARTICLE --> </div> </div> </div> </div> <!-- /Aside Column --> </div> </div> </div> <footer class="site-footer"> <div class="container"> <span class="footer-links"> Copyright ©2026 Visos Teisės Saugomos | <a href="//www.techcodeview.com/it/">techcodeview.com </a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas </a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus </a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika </a> </span> </div> </footer> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script> <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script> <script> !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=` #toTopBtn { position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } #toTopBtn:hover { background-color: #0284c7; } `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}(); </script> </body> </html>