Événements (Events) JavaScript

Un événement est une opération qui se produit dans le navigateur, déclenchée par l'utilisateur ou par le navigateur lui-même.

Voici quelques exemples d'événements courants qui peuvent se produire sur un site Web :

• la page est complètement chargée

• l'utilisateur clique sur un bouton

• l'utilisateur fait défiler le document

• l'utilisateur ajuste la taille du navigateur

• l'utilisateur déplace la souris

• l'utilisateur soumet le formulaire

• l'utilisateur a appuyé sur une touche du clavier

• le champ d'entrée HTML a été modifié

Chaque événement disponible agestionnaires d'événementscegestionnaires d'événementsC'est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui s'exécute lors du déclenchement de l'événement.

En comprenant les événements, vous serez en mesure de fournir une expérience Web plus interactive aux utilisateurs finaux.

Un exemple simple

Lorsque l'événement est déclenché, par exemple lorsque l'utilisateur clique sur un bouton, il est possible d'exécuter un bloc de code JavaScript.

Dans l'exemple suivant, nous avons un bouton qui, lorsqu'il est appuyé, appelleshowDate()Fonction :

<button onclick="showDate()">Cliquez-moi</<button>

JavaScript showDate()La fonction est présentée comme suit :

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</<script>

Les méthodes d'utilisation des événements

Il est possible d'attribuer un événement à un élément de trois manières, de sorte qu'il soit exécuté lors du déclenchement de l'événement associé :

• Gestionnaire d'événement en ligne

• propriété gestionnaire d'événement

• Écouteur d'événement

Nous allons présenter les trois méthodes pour vous assurer que vous êtes familier de chaque manière de déclencher un événement.

l'attribut de gestionnaire d'événement en ligne

Pour attribuer un événement à un élément HTML, nous pouvons utiliserattributs d'événement HTML.

Dans l'exemple suivant, lorsque l'utilisateur clique sur<p>lorsque l'élément est cliqué, son contenu est modifié :

<p onclick="this.innerHTML = 'Hello world'>Cliquez ici pour changer ce texte</<p>

Dans l'exemple suivant, lorsque l'utilisateur clique sur<p>lorsque l'élément est cliqué, une fonction est appelée :

<p onclick="changeText(this)">Cliquez ici pour changer ce texte</<p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</<script>

Dans l'exemple suivant, nous avons un bouton, appuyer sur lequel changera le fond d'écran en couleur aléatoire :

<button onclick="bgChange()">Cliquez-moi</<button>
<script>
function bgChange() {
　　　let color = "rgb("　+　255)　+　",　+　255)　+　",　+　255)　+　);";
　　　document.body.style.backgroundColor = color;
}
</<script>

Le gestionnaire d'événement en ligne est une méthode simple pour comprendre les événements, mais il ne devrait généralement pas être utilisé à des fins autres que de test et d'éducation.

propriété gestionnaire d'événement

Le prochain pas pour le gestionnaire d'événement en ligne estpropriété gestionnaire d'événement.Cela est très similaire aux gestionnaires d'événements en ligne, sauf que nous définissons les attributs de l'élément en JavaScript plutôt que dans l'HTML.

Dans l'exemple suivant, nous allons attribuer un événement onclick à l'élément HTML d'ID "para" :

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

Nous pouvons également attribuer la propriété gestionnaire d'événement en égale à la nom de la fonction :

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

Dans l'exemple précédent, nous allons assigner le nomchangeTextla fonction attribuée à l'élémentid="para"de l'élément HTML.

lorsque cet élément est cliqué, cette fonction est exécutée.

Dans l'exemple suivant, nous avons un bouton, appuyer sur lequel changera le fond d'écran en couleur aléatoire :

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　255)　+　",　+　255)　+　",　+　255)　+　);";
　　　document.body.style.backgroundColor = color;
}

Note :gestionnaires d'événementsne suit pasLa convention de nommage camelCase est suivie par la plupart des codes JavaScript. Notez que le code estonclick, pasonClick.

Événements onfocus et onblur

onfocus déclenche cet événement lorsque l'élément obtient le focus.

onblur déclenche cet événement lorsque l'élément perd le focus.

<input type="text" onfocus="func1(this)" onblur="func2(this)"

Événement onchange

L'événement onchange déclenche lorsque la valeur de l'élément change.

<input type="text" onchange="myFunc(this)" value="Hello">

Événements onmouseover et onmouseout

onmouseover déclenche cet événement lorsque l'appareil de pointeur (généralement la souris) est déplacé sur l'élément ou l'un de ses éléments enfants.

onmouseout déclenche cet événement lorsque l'appareil de pointeur (généralement la souris) est déplacé hors de l'élément ou l'un de ses éléments enfants.

Lire la suite

Référence HTML :Référence des attributs événement HTML

Référence JavaScript :Référence de l'objet événement DOM HTML