méthode HTML DOM addEventListener ()

Exemples

Ajouter un événement de clic dans le document. Lorsque l'utilisateur clique partout dans le document, l'id = "demo" de la balise <p> sortie de l'élément "Bonjour tout le monde":

document.addEventListener ( "click", function () {
. Document.getElementById ( "demo") innerHTML = "Bonjour tout le monde";
});

Essayez »

Définition et utilisation

Procédé document.addEventListener () est utilisée pour ajouter un gestionnaire d'événements au document.

Astuce: Vous pouvez utiliser document.removeEventListener () méthode pour supprimer la méthode addEventListener () pour ajouter des gestionnaires d'événements.

Astuce: Utilisez . Élément addEventListener () Méthode spécifiée élément au gestionnaire d'événements.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la méthode.

manière
addEventListener ()	1.0	9.0	1.0	1.0	7.0

Remarque: Internet Explorer 8 et les versions antérieures de IE ne prennent pas en charge la méthode addEventListener (), Opera 7.0 et les versions antérieures ne prennent pas en charge Opera. Cependant, ce type de version du navigateur peut être utilisé méthode attachEvent () pour ajouter un gestionnaire d'événements (problèmes de compatibilité entre les navigateurs peuvent voir les "exemples").

grammaire

document.addEventListener (événement, fonction, useCapture)

Paramètre Valeur

Paramètres	description
événement	Obligatoire. Nom de chaîne de la description de l'événement. Note: Ne pas utiliser le préfixe "on". Par exemple, utiliser "cliquez sur" au lieu de "onclick". Astuce: Tous les événements HTML DOM, vous pouvez voir notre complète HTML DOM Event Object Reference .
fonction	Obligatoire. Il décrit les fonctions après l'événement déclenché. Lorsque l'événement est déclenché, l'objet d'événement comme premier argument passé à la fonction. Type d'objet événement dépend de l'événement particulier. Par exemple, "cliquez sur" événement appartient MouseEvent (événement de souris) objet.
useCapture	Optionnel. Valeur booléenne qui spécifie si l'exécution de l'événement dans la capture ou de la phase bouillonnant. Valeurs possibles: true - gestionnaire d'événement exécuté pendant la phase de capture défaut faux-. Les gestionnaires d'événements exécutent dans la phase de propagation

détails techniques

Version DOM:	Niveau DOM 2 Events
Retours:	Aucune valeur de retour
records:	Dans Firefox 6 et Opera 11.60 en useCapture paramètre est facultatif. (Dans Chrome, IE et Safari a toujours été en option).

D'autres exemples

Exemples

Vous pouvez être référé par la fonction externe de nom de la fonction:

document.addEventListener ( «clic», myFunction);

function myFunction () {
. Document.getElementById ( "demo") innerHTML = "Bonjour tout le monde";
}

Essayez »

Exemples

Vous pouvez ajouter autant d'événements dans le document, en ajoutant l'événement ne sera pas écraser l'événement existant.

Cet exemple montre comment ajouter un événement de clic dans deux documents:

document.addEventListener ( «clic», myFunction);
document.addEventListener ( «clic», someOtherFunction);

Essayez »

Exemples

Vous pouvez ajouter différents types d'événements dans le document.

Cet exemple montre comment ajouter plusieurs événements dans un document:

document.addEventListener ( "mouseover", myFunction);
document.addEventListener ( «clic», someOtherFunction);
document.addEventListener ( "mouseout", someOtherFunction);

Essayez »

Exemples

Lors du passage d'une valeur de paramètre, utilisez l'appel de fonction avec des paramètres "fonction anonyme":

document.addEventListener ( "click", function () {
maFonction (P1, P2);
});

Essayez »

Exemples

Modifier élément <body> de l'arrière-plan:

document.addEventListener ( "click", function () {
document.body.style.backgroundColor = "red";
});

Essayez »

Exemples

En utilisant la méthode removeEventListener () pour supprimer par addEventListener () pour ajouter des gestionnaires d'événements:

// Ajoutez un gestionnaire d'événements pour le document
document.addEventListener ( "mousemove", myFunction);

// Retirez le gestionnaire d'événements de documents
document.removeEventListener ( "mousemove", myFunction);

Essayez »

Exemples

Si votre navigateur ne supporte pas la méthode addEventListener (), vous pouvez utiliser la méthode attachEvent () à la place.

L'exemple suivant montre la solution multi-navigateur:

if (document.addEventListener) {// tous les principaux navigateurs, sauf IE 8 et les versions antérieures de IE
document.addEventListener ( «clic», myFunction);
} Else if (document.attachEvent) {// IE 8 et les versions antérieures de IE
document.attachEvent ( "onclick", myFunction);
}

Essayez »