Événements JavaScript DOM: Onclick et Onload

Dans les premiers jours d'Internet, les pages Web étaient vraiment statiques - il n'y avait que du texte et des images. Bien sûr, parfois cette image était un gif animé, mais ce n'était encore qu'une image.

Avec l'avènement de JavaScript, il est devenu de plus en plus possible de créer des pages interactives qui répondraient à des actions comme cliquer sur un bouton ou avoir une animation de défilement.

Il y a un certain nombre d'événements DOM (Document Object Model) que vous pouvez écouter en JavaScript, mais onclicket onloadsont parmi les plus courantes.

Événement Onclick

L' onclickévénement en JavaScript vous permet d'exécuter une fonction lorsqu'un élément est cliqué.

Exemple

Click me  function myFunction() { alert('Button was clicked!'); } 

Dans l'exemple simple ci-dessus, lorsqu'un utilisateur clique sur le bouton, une alerte s'affiche dans son navigateur Button was clicked!.

Ajouter onclickdynamiquement

L'exemple ci-dessus fonctionne, mais est généralement considéré comme une mauvaise pratique. Au lieu de cela, il est préférable de séparer le contenu de la page (HTML) de la logique (JS).

Pour ce faire, l' onclickévénement peut être ajouté par programme à n'importe quel élément à l'aide du code suivant dans l'exemple suivant:

click on this element.

const p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

Remarque

Il est important de noter qu'en utilisant, onclicknous ne pouvons ajouter qu'une seule fonction d'écoute. Si vous souhaitez en ajouter, utilisez simplement addEventListener(), qui est la méthode préférée pour ajouter des événements.

Dans l'exemple ci-dessus, lorsqu'un utilisateur clique sur l' paragraphélément dans le html, il verra apparaître une alerte onclick Event triggered.

Empêcher l'action par défaut

Cependant, si nous nous attachons onclickà des liens (balise HTML a), nous pourrions vouloir empêcher l'action par défaut de se produire:

Guides  const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

Dans l'exemple ci-dessus, nous avons empêché le comportement par défaut de l' aélément (lien d'ouverture) en utilisant event.preventDefault()notre onclickfonction de rappel.

Événement de chargement

L' onloadévénement est utilisé pour exécuter une fonction JavaScript immédiatement après le chargement d'une page.

Exemple:

const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } 

Qui peut être abrégé en:

document.body.onload = function() { alert('Page finished loading'); } 

Dans l'exemple ci-dessus, dès que la page Web est chargée, la myFunctionfonction sera appelée, affichant l' Page finished loadingalerte à l'utilisateur.

L' onloadévénement est généralement attaché à l' élément. Ensuite, une fois le de la page chargé, qui comprend toutes les images et les fichiers CSS et JS, votre script s'exécutera.

Plus d'information:

Ce ne sont que deux des nombreux événements DOM que vous pouvez manipuler avec JavaScript, mais sont parmi les plus couramment utilisés.

Mais parfois, vous n'avez pas du tout besoin d'écouter les événements DOM et vous souhaitez utiliser un événement basé sur le temps comme un compte à rebours. Pour un tutoriel rapide sur les événements de chronométrage, consultez cet article.