méthode HTML DOM addEventListener ()

Exemples

Pour le bouton <> pour ajouter un événement de clic. Lorsque l'utilisateur clique sur le bouton du id = "demo" de la balise <p> sortie de l'élément "Bonjour tout le monde":

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

Essayez »

Définition et utilisation

méthode addEventListener () est utilisée pour ajouter un gestionnaire d'événements à un élément spécifié.

Astuce: Utilisez le removeEventListener () méthode pour supprimer la méthode addEventListener () pour ajouter des gestionnaires 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: la méthode Internet Explorer 8 et les versions antérieures de IE ne supporte pas les addEventListener () ,, Opera 7.0 et les versions antérieures ne prennent pas en charge Opera. Cependant, ils ne prennent pas en charge la fonction du navigateur, vous pouvez utiliser la méthode attachEvent () pour ajouter un gestionnaire d'événements (voir "Autres exemples" pour une solution cross-browser).

grammaire

élément .addEventListener (événement, fonction, useCapture )

Paramètre Valeur

Paramètres	description
événement	Must. Chaîne spécifiant le nom 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	Must. Fonction à exécuter lorsque l'événement spécifié se déclenche. Lorsque 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- 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
Record:	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 référencer fonction externe par nom de fonction.

Cet exemple montre comment effectuer un utilisateur clique élément <button> Fonction:

. Document.getElementById ( "myBtn") 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 deux événement click dans élément <button>:

. Document.getElementById ( "myBtn") addEventListener ( "clic", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clic", someOtherFunction);

Essayez »

Exemples

Vous pouvez ajouter différents types d'événements dans le même élément.

Cet exemple montre comment ajouter plusieurs événements dans le même élément <button>:

. Document.getElementById ( "myBtn") addEventListener ( "mouseover", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clic", someOtherFunction);
. Document.getElementById ( "myBtn") 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.getElementById ( "myBtn"). addEventListener ( "click", function () {
maFonction (P1, P2);
});

Essayez »

Exemples

Modifier <bouton> éléments de fond:

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

Essayez »

Exemples

Utilisez les paramètres facultatifs pour démontrer différentes useCapture bouillonnantes et capture phases:

. Document.getElementById ( "myDiv") addEventListener ( «clic», myFunction, true);

Essayez »

Exemples

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

// Ajouter <div> gestionnaire d'événements
. Document.getElementById ( "myDiv") addEventListener ( "mousemove", myFunction);

// Supprimer <div> gestionnaire d'événements
. Document.getElementById ( "myDiv") 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:

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

Essayez »