Tableau récapitulatif des événements

Événement Description
click Clic de l'utilisateur sur un élément
dblclick Double clic de l'utilisateur sur un élément
mousedown Bouton de la souris enfoncé
mouseup Bouton de la souris relâché
mouseenter Souris entre dans un élément
mouseleave Souris quitte un élément
mousemove Mouvement de la souris
focus Élément reçoit le focus
blur Élément perd le focus
keydown Touche enfoncée
keypress Touche pressée (événement historique, aujourd'hui plutôt remplacé par keydown)
keyup Touche relâchée
input Valeur changée
change Valeur changée et perte de focus
submit Soumission de formulaire
resize Redimensionnement de la fenêtre
scroll Défilement de la page ou d'un élément
focusout Perte de focus (bubbling), se propage vers les ancêtres
focusin Réception de focus (bubbling), se propage vers les ancêtres
dragstart Début du glissement
drag Glissement de l'élément
dragend Fin du glissement
drop Dépôt de l'élément 
// jQuery
const input = $('input[name="__"]');
const classe = $('.maclass');
const id = $('#monid');

id.on('click', function (e) {
  e.preventDefault();
});

input.on('click change', function (e) {
  e.preventDefault();
});

// Vanilla JS
window.addEventListener('resize', (e) => {
  console.log('Fenêtre redimensionnée', e.type);
});

const timer = setTimeout(() => {
  console.log('Timer terminé');
}, 200);

console.log('');
console.error('');

Prêt du DOM

// jQuery
$(document).ready(() => {
  console.log('DOM prêt côté jQuery');
});

// Vanilla JS
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM prêt côté Vanilla JS');
})

Console

Méthode Description
console.log('Bonjour') Affiche Bonjour ou une variable
console.error() Affiche un message d'erreur
console.warn() Affiche un avertissement
console.info() Affiche des informations générales
console.debug() Affiche des messages de débogage
console.clear() Efface la console
console.table() Affiche en tableau
console.time('toto') / console.timeEnd('toto') Arrête le compteur de temps et affiche le temps écoulé dans la console
console.group('toto') / console.groupEnd('toto') / console.groupCollapsed() Crée un groupe de messages dans la console, facilitant l'organisation
console.assert(false, 'Erreur : xxxx') Affiche un message d'erreur si l'assertion est fausse
console.count('toto') / console.countReset('toto') Affiche le nombre de fois que cette ligne a été appelée avec la même étiquette
console.trace() Affiche une trace de la pile d'exécution à l'endroit où elle est appelée
console.dir() Affiche un objet dans un format interactif, permettant d'explorer ses propriétés 
// Afficher les résultats
console.log(`Loop 1 Time: ${loop1Time.toFixed(3)}ms`);