Que sont les événements en JavaScript et comment sont-ils gérés?

Les événements en JavaScript fournissent une interface dynamique à une page Web. Ces événements sont connectés à des éléments dans le modèle d'objet de document (DOM).

Les événements sont des actions ou des occurrences qui se produisent dans le système. Dans le monde de la programmation, les événements sont quelque chose qui arrive aux éléments HTML. Mais quand est utilisé dans les pages HTML, il peut réagir à ces événements. Dans cet article, nous verrons quels sont les différents types d'événements en JavaScript et comment fonctionnent-ils, dans l'ordre suivant:



Que sont les événements en JavaScript?

Javascript a des événements qui fournissent une interface dynamique à une page Web. Ces événements sont liés à des éléments du Modèle d'objet de document (JUGEMENT).



De plus, ces événements utilisent par défaut la propagation de bulles, c'est-à-dire vers le haut dans le DOM des enfants au parent. Nous pouvons lier des événements en ligne ou dans un script externe. Avec l'aide de JavaScript, vous pouvez détecter quand certains événements se produisent et provoquer des événements en réponse à ces événements.

Types d'événements en JavaScript

Il existe différents types d'événements dans qui sont utilisés pour réagir aux événements. Ici, nous discuterons de certains des événements célèbres ou les plus couramment utilisés tels que:



  • Sur clic
  • Onkeyup
  • Onmouseover
  • En charge
  • Onfocus

Alors passons à autre chose et examinons ces événements en JavaScript avec un exemple.

Événement Onclick

L'événement Onclick est un événement de souris et provoque toute logique définie si l'utilisateur clique sur l'élément auquel il est lié. Prenons un exemple et voyons comment cela fonctionne:

function edu () {alert ('Welcome to Edureka!')} Cliquez sur le bouton

Production:



Sortie 1 - Evénements en javascript - Edureka

Après avoir cliqué sur le bouton, vous obtenez le message d'alerte suivant:

Événement Onekeyup

Cet événement est un événement de clavier et il est utilisé pour exécuter des instructions chaque fois qu'une touche est relâchée après avoir appuyé sur. L'exemple suivant montre le fonctionnement de l'événement:

var a = 0 var b = 0 var c = 0 function changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 si (a> 255) a = a - b si (b> 255) b = a si (c> 255) c = b}

Production:

Après avoir écrit quelque chose, cela ressemble à ceci:

Événement Onmouseover

L'événement onmouseover en JavaScript correspond au survol du pointeur de la souris sur l'élément et ses enfants auxquels il est lié. L'exemple est illustré ci-dessous:

function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}

Production:

La boîte colorée apparaît avant de faire passer la souris. Dès que vous passez la souris sur la boîte, elle disparaît.

__en soi)

Événement de chargement

L'événement onload est évoqué lorsqu'un élément est complètement chargé. Prenons un exemple et voyons comment cela fonctionne:

  logo-edu 

Production:

Événement Onfocus

L'événement Onfocus a une liste d'éléments qui exécute des instructions chaque fois qu'il reçoit le focus. L'exemple suivant montre comment fonctionne l'événement onfocus:

function focused () {var e = document.getElementById ('input') if (confirm ('Focus Event')) {e.blur ()}}

Focus dans la zone de saisie:

Production:

Voici quelques-uns des événements les plus fréquemment utilisés en JavaScript. Avec cela, nous sommes arrivés à la fin de notre article. J'espère que vous avez compris ce que sont les événements et comment ils sont utilisés.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de ce blog et nous vous recontacterons.