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"; } });
Votre commentaire