Tuto JS - #12 Les événements en JavaScript

PrimFX PrimFX Le 17 octobre 2018


Vous ne rêvez pas, on se retrouve bel et bien après une absence (très) prolongée pour de nouvelles vidéos !
Je vous propose aujourd'hui de découvrir le fonctionnement des événements en JavaScript, qui vous permettront de dynamiser davantage les interactions entre les internautes et les éléments qui se trouvent sur votre page :-)

Liste de tous les événements "écoutables" : https://www.w3schools.com/jsref/dom_obj_event.asp

Le code vu dans ce tuto :

  • index.html
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>TUTO JS - #12 Les événements</title>
    	<link href="css/style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    
    <h1>TUTO JS - #12 Les événements</h1>
    <button class="bouton">Dead link</button>
    
    <script src="js/app.js"></script>
    </body>
    </html>​
  • js/app.js
    document.getElementById("lien").addEventListener('click', function(e) {
    	e.preventDefault();
    	alert('Attention, lien mort !');
    	return false;
    });​
    document.querySelector(".bouton").addEventListener('dblclick', function(e) {
    	alert('dbclick');
    });
    window.addEventListener('resize', function() {
    	if (document.querySelector("html").style.backgroundColor == "lightblue") {
    		document.querySelector("html").style.backgroundColor = "lightgreen";
    	} else {
    		document.querySelector("html").style.backgroundColor = "lightblue";
    	}
    });

 

A propos de l'auteur

PrimFX
PrimFX

Salut tout le monde ! Je m'appelle Boris, j'ai 20 ans et je suis passionné d'informatique et de technologie. Je partage cette passion à travers mes vidéos sur YouTube et les articles de ce site internet. J'ai également co-fondé en 2019 l'entreprise de services informatique Single Quote et je suis en parallèle étudiant (en informatique bien sur) :-)

Votre commentaire

Vous devez être connecté pour poster un commentaire. Se connecter ou Créer un compte

Commentaires 1