recherche

Maison  >  Article  >  interface Web  >  Apprenez les flux d'événements JavaScript et les astuces des gestionnaires d'événements_javascript

Apprenez les flux d'événements JavaScript et les astuces des gestionnaires d'événements_javascript

WBOY
WBOYoriginal
2016-05-16 15:18:221081parcourir

Cet article présente le flux d'événements JavaScript et le gestionnaire d'événements dans son intégralité et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

1. Flux d'événements

Le flux d'événements décrit la séquence d'événements reçus de la page. Le flux d'événements d'IE est un flux bouillonnant d'événements, tandis que le flux d'événements de Netscape Communicator est un flux de capture d'événements.

2. Événement bouillonnant

C'est-à-dire que l'événement est initialement reçu par l'élément le plus spécifique, puis se propage vers le haut vers des nœuds moins spécifiques. Tel que : 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div>Click</div>
</body>
</html>

Lorsque l'utilisateur clique sur l'élément div de la page, l'événement click sera propagé dans l'ordre suivant :

  • élément div
  • élément corporel
  • élément HTML
  • objet document

3. Capture d'événement

L'idée de la capture d'événement est que le nœud le plus spécifique doit recevoir l'événement en dernier. Le but de la capture d'événement est de capturer l'événement avant qu'il n'atteigne la cible.

Lorsque l'utilisateur clique sur l'élément div de la page, l'événement click sera propagé dans l'ordre suivant :

  • objet document
  • balise html
  • balise corps
  • balise div

Bien que la spécification exige que les événements soient propagés à partir de l'objet document, les navigateurs commencent généralement à capturer les événements à partir de l'objet fenêtre. Étant donné que les anciennes versions des navigateurs ne le prennent pas en charge, le bouillonnement d’événements est généralement utilisé.

4. Flux d'événements DOM

Le flux d'événements spécifié par « Événements de niveau DOM2 » comprend trois étapes : étape de capture d'événement, étape cible et étape de bouillonnement d'événement .

Dans le flux d'événements DOM, la cible réelle ne reçoit pas d'événements pendant la phase de capture. C'est-à-dire que pendant la phase de capture, l'événement s'arrête après être passé du document au HTML puis au corps. La phase suivante est la phase « sur la cible », où l'événement se produit au sein du div et est considéré comme faisant partie de la phase de bouillonnement dans la gestion des événements. Vient ensuite la phase de bouillonnement. IE8 et les versions antérieures ne prennent pas en charge le streaming d'événements DOM. Le navigateur déclenche des événements sur l'objet événement pendant la phase de capture. Le résultat est qu'il existe deux possibilités d'opérer des événements sur l'objet cible.

5. Gestionnaire d'événements

Un événement est une certaine action effectuée par l'utilisateur ou le navigateur lui-même ; un gestionnaire d'événement (ou écouteur d'événement) est une fonction qui répond à un événement. Le nom du gestionnaire d'événements commence par "on", comme onload, onclick, etc.

6. Gestionnaire d'événements HTML

Pour exécuter du code js lorsque vous cliquez sur le bouton, vous pouvez l'écrire comme ceci : 

<div onclick="alert('Clicked')">Click</div>

Remarque : les caractères de syntaxe HTML non échappés ne peuvent pas être utilisés à l'intérieur.

Vous pouvez également appeler des scripts définis ailleurs dans la page : 

<script>
 function showMessage () {
  document.write("fdas");
 }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

Le code du gestionnaire d'événements a accès à n'importe quel code de la portée globale lors de son exécution.

L'utilisation de ceci créera une fonction qui encapsule la valeur de l'attribut de l'élément. Cette fonction a une variable locale event, qui est l'objet événement : 

<input type="button" value="Click Me" onclick="alert(event.type)" />

Où, la valeur de this est égale à l'élément cible de l'événement, tel que : 

<input type="button" value="Click Me" onclick="alert(this.value)" />

Il existe de nombreux problèmes avec les gestionnaires d'événements HTML, donc les gestionnaires d'événements spécifiés par js doivent être utilisés

7. Gestionnaire d'événements DOM niveau 0

Pour utiliser js pour spécifier un gestionnaire d'événements, vous devez d'abord obtenir une référence à l'objet sur lequel opérer.

Chaque élément possède ses propres attributs de gestionnaire d'événements, qui sont généralement tous en minuscules, comme onclick. Tel que : 

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log("hello");
}
</script>

Les gestionnaires d'événements spécifiés à l'aide des méthodes DOM de niveau 0 sont considérés comme des méthodes de l'élément. Par conséquent, le gestionnaire d'événements s'exécute à ce moment-là dans la portée de l'élément ; c'est-à-dire qu'il fait référence à l'élément actuel : 

<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
 console.log(this.type);
}
</script>

Les gestionnaires d'événements ajoutés de cette manière seront traités pendant la phase de bouillonnement du flux d'événements.

Supprimer les gestionnaires d'événements spécifiés via les méthodes DOM niveau 0 : 

btn.onclick = null;

8. Gestionnaire d'événements de niveau DOM2

addEventListener()

Cette méthode reçoit trois paramètres : le nom de l'événement à traiter, la fonction du gestionnaire d'événement et une valeur booléenne ; si la valeur booléenne est vraie, cela signifie appeler le gestionnaire d'événement dans l'étape de capture ; appeler l'événement dans le gestionnaire d'étape bouillonnante. Tel que : 

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
 console.log(this.id);
})

Vous pouvez également ajouter plusieurs gestionnaires d'événements au bouton, tels que : 

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
  console.log(this.id);
})
btn.addEventListener("click", function () {
  console.log(this.value);
})

removeEventListener()

var btn = document.getElementById("btn");
function info () {
  console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
  console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
  console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
  console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

대부분의 경우 이벤트 핸들러는 다양한 브라우저와의 호환성을 극대화하기 위해 이벤트 흐름의 버블링 단계에 추가됩니다.

위 내용은 JavaScript 이벤트 스트림 및 이벤트 핸들러에 관한 모든 내용이 모든 사람의 학습에 도움이 되기를 바랍니다.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la conversion mutuelle entre les chaînes et les tableaux dans les compétences js_javascriptArticle suivant：Explication détaillée de la conversion mutuelle entre les chaînes et les tableaux dans les compétences js_javascript

Articles Liés

Voir plus