JavaScript addEventListener() con esempi
IL metodo addEventListener() dell'interfaccia EventTarget imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato alla destinazione. Questo metodo consente più gestori di eventi su un elemento, consentendo una gestione dinamica e flessibile dell'interazione all'interno delle applicazioni web.
Sintassi:
element.addEventListener(event, listener, useCapture);
parametri:
- evento: l'evento può essere qualsiasi evento JavaScript valido. Gli eventi vengono utilizzati senza prefissi on come l'utilizzo di click invece di onclick o mousedown invece di onmousedown.
- ascoltatore (funzione del gestore): Può essere una funzione JavaScript che risponde all'evento che si verifica.
- utilizzareCapture: È un parametro facoltativo utilizzato per controllare la propagazione degli eventi. Viene passato un valore booleano where VERO denota la fase di cattura e falso denota la fase di gorgogliamento.
Esempio 1: In questo esempio, visualizzeremo il testo sulla pagina web dopo aver fatto clic sul pulsante.
HTML Titolo documento> testa> <body> <button id='try'>Fare clic qui sul pulsante> <h1 id='text'>h1> <script>document.getElementById('try').addEventListener('click', function () { document.getElementById('text').innerText = 'techcodeview.com'; }); script> corpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Produzione: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp' alt='JavaScript addEventListener() con esempi'> <p>JavaScript addEventListener() con esempi </p> <p dir='ltr'> <br> <b> <strong>Esempio 2: </strong> </b> <span>In questo esempio, due eventi mouseover e mouseout vengono aggiunti allo stesso elemento. Se si passa sopra il testo, si verifica l'evento mouseover e viene richiamata la funzione RespondMouseOver, analogamente per l'evento mouseout viene richiamata la funzione RespondMouseOut. </span> </p>HTML <code> <pre> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Titolo documento> testa> <body> <button id='clickIt'>Fare clic qui sul pulsante> <p id='hoverPara'>Passa il mouse sopra questo testo !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 += 'Click Event' + ' '; } script> corpo> html> </pre> </code> <p dir='ltr'> <b> <strong>Produzione: </strong> </b> <span> </span> </p> <img src='//techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples-2.webp' alt='JavaScript addEventListener() con esempi'> <p>JavaScript addEventListener() con esempi </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>
Condividere </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=JavaScript addEventListener() con esempi&url=https://www.techcodeview.com/it/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/it/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/it/javascript-addeventlistener-with-examples&title=JavaScript addEventListener() con esempi"
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>
<!-- 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">
Potrebbe Piacerti </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/it/list-arab-countries" 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/list/71/list-arab-countries.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Elenco dei paesi arabi" 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="/it/list-arab-countries">Elenco dei paesi arabi </a>
</h4>
</div> <div class="group">
<a href="/it/what-is-full-form-mg-car" 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/category/84/what-is-full-form-mg-car.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Qual è la forma completa di MG Car" 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="/it/what-is-full-form-mg-car">Qual è la forma completa di MG Car </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>
Articoli Più </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="/it/difference-between-reactjs">
<img src="https://techcodeview.com/img/reactjs-tutorial/66/difference-between-reactjs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Differenza tra ReactJS e React Native" 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="/it/difference-between-reactjs" class="hover:text-tech-500 transition-colors line-clamp-3">Differenza tra ReactJS e React Native </a>
</h4>
</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="/it/how-center-text-horizontally">
<img src="https://techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Come centrare il testo (orizzontalmente e verticalmente) all'interno di un blocco div in CSS?" 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="/it/how-center-text-horizontally" class="hover:text-tech-500 transition-colors line-clamp-3">Come centrare il testo (orizzontalmente e verticalmente) all'interno di un blocco div in CSS? </a>
</h4>
</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="/it/count-maximum-points-on-same-line">
<img src="https://techcodeview.com/img/geometric/32/count-maximum-points-on-same-line.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Contare il numero massimo di punti sulla stessa riga" 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="/it/count-maximum-points-on-same-line" class="hover:text-tech-500 transition-colors line-clamp-3">Contare il numero massimo di punti sulla stessa riga </a>
</h4>
</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="/it/what-is-computer-programming">
<img src="https://techcodeview.com/img/computer/75/what-is-computer-programming.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cos'è la programmazione informatica?" 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="/it/what-is-computer-programming" class="hover:text-tech-500 transition-colors line-clamp-3">Cos'è la programmazione informatica? </a>
</h4>
</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="/it/mathematics-law-total-probability">
<img src="https://techcodeview.com/img/it-problems-solutions/92/mathematics-law-total-probability.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Matematica – Legge della probabilità totale" 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="/it/mathematics-law-total-probability" class="hover:text-tech-500 transition-colors line-clamp-3">Matematica – Legge della probabilità totale </a>
</h4>
</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="/it/bash-scripting-array">
<img src="https://techcodeview.com/img/bash-script/60/bash-scripting-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash Scripting – Array" 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="/it/bash-scripting-array" class="hover:text-tech-500 transition-colors line-clamp-3">Bash Scripting – Array </a>
</h4>
</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="/it/displaying-graphics-swing">
<img src="https://techcodeview.com/img/java-swing/14/displaying-graphics-swing.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Visualizzazione della grafica in oscillazione:" 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="/it/displaying-graphics-swing" class="hover:text-tech-500 transition-colors line-clamp-3">Visualizzazione della grafica in oscillazione: </a>
</h4>
</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="/it/70-most-conservative-colleges-america-131946">
<img src="https://techcodeview.com/img/blog/85/70-most-conservative-colleges-america.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="I 70 college più conservatori d'America" 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="/it/70-most-conservative-colleges-america-131946" class="hover:text-tech-500 transition-colors line-clamp-3">I 70 college più conservatori d'America </a>
</h4>
</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="/it/python-tkinter-tutorial">
<img src="https://techcodeview.com/img/python-tutorial/88/python-tkinter-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutorial su Python Tkinter" 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="/it/python-tkinter-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Tutorial su Python Tkinter </a>
</h4>
</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="/it/understanding-great-gatsby-ending-1311464">
<img src="https://techcodeview.com/img/blog/84/understanding-great-gatsby-ending.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comprendere il finale e l'ultima riga del Grande Gatsby" 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="/it/understanding-great-gatsby-ending-1311464" class="hover:text-tech-500 transition-colors line-clamp-3">Comprendere il finale e l'ultima riga del Grande Gatsby </a>
</h4>
</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">Categoria </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/it/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">
Blog
</a> <a href="/it/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">
Conversione Java
</a> <a href="/it/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">
Matematica
</a> <a href="/it/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">
Collezioni Java
</a> <a href="/it/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">
Differenze
</a> <a href="/it/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">
Stringa Java
</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">Articoli Interessanti </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/dsa/13/minimum-initial-energy-required-to-cross-street.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Energia iniziale minima richiesta per attraversare la strada" 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="/it/dsa/">DSA </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/minimum-initial-energy-required-to-cross-street">Energia iniziale minima richiesta per attraversare la strada </a> </h4>
</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/python-oop/53/python-continue-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Dichiarazione di continuazione di Python" 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="/it/python-oop/">Python-Oop </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/python-continue-statement">Dichiarazione di continuazione di Python </a> </h4>
</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/17/is-gatsby-great-analyzing-title-great-gatsby.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gatsby è fantastico? Analizzando il titolo del Grande Gatsby" 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="/it/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/is-gatsby-great-analyzing-title-great-gatsby-1311246">Gatsby è fantastico? Analizzando il titolo del Grande Gatsby </a> </h4>
</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/62/what-is-an-app-manager.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cos'è un gestore di app?" 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="/it/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/what-is-an-app-manager">Cos'è un gestore di app? </a> </h4>
</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/geeks-premier-league-2022/98/how-create-shell-script-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Come creare uno script di shell in Linux" 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="/it/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/how-create-shell-script-linux">Come creare uno script di shell in Linux </a> </h4>
</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/microsoft-azure-tutorial/82/what-is-microsoft-azure-subscription.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cos'è l'abbonamento a Microsoft Azure?" 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="/it/microsoft-azure-tutorial/">Esercitazione Su Microsoft Azure </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/what-is-microsoft-azure-subscription">Cos'è l'abbonamento a Microsoft Azure? </a> </h4>
</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 Tutti I Diritti Riservati |
<a href="//www.techcodeview.com/ro/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza </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>