---
title: JavaScript : jQuery & Vanilla JS
source: https://synapx.fr/blog/javascript-jquery-vanilla/
date: 2026-06-26
category: Développement
site: SynapxLab
---

# JavaScript : jQuery & Vanilla JS

## 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 |

```js
// 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

```js
// 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 |

```js
// Afficher les résultats
console.log(`Loop 1 Time: ${loop1Time.toFixed(3)}ms`);
```