recherche

Maison >interface Web >js tutoriel >Analyse du code du taux de bouillonnement des événements

Analyse du code du taux de bouillonnement des événements

不言
不言original
2018-07-14 16:06:572312parcourir

Cet article présente principalement l'analyse du code de la bulle de rapport de bouillonnement d'événement, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Le concept de bulle est quand. l'élément enfant déclenche un événement, l'élément ancêtre correspondant déclenchera également le même événement

(à condition que l'élément parent ait également ajouté le même événement)

ex : Le fils a un ancêtre onclick dix Yatsura a aussi onclick

En cliquant sur le fils, l'événement clic de la 18ème génération de l'ancêtre sera également déclenché

Parfois cette situation posera de nombreux problèmes, il faut donc éviter les bulles

Seuls les éléments cliqués déclenchent des événements

Tous les événements ne bouillonneront pas

onblur onfocus onload onerror not

En fait, il existe trois processus pour déclencher des événements : Capture phase--->En phase cible---->Phase de bouillonnement

Ordre standard des bulles du navigateur éléments enfants-->Parent-->corps-->document-- ->fenêtre

Élément enfant IE-->parent-->body-->document

Ensuite, le code est très simple, il suffit de faire un processus de compatibilité

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>阻止冒泡</title>
 </head>
 <body>
     <input type="button"  id="cancelBubble" value="取消冒泡"/>
    <script type="text/javascript">
          var btn=document.getElementById("cancelBubble");
          document.onclick=function(){
            alert("冒泡");
          }
          btn.onclick=function(event){
          var event=event||window.event;//兼容
          if(event && event.stopPropagation){
               
               event.stopPropagation();
          
          }
          else{
              //IE 678
             event.cancelBubble=true;
          }
           alert("没有冒泡");
          
          }
    </script>
 </body>
</html>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse de la façon dont NodeJS exploite la file d'attente de messages RabbitMQ

Comment JavaScript implémente la fonction de téléchargement de fichiers

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript rabbitmq 事件
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：Analyse de la façon dont NodeJS fonctionne la file d'attente de messages RabbitMQArticle suivant：Analyse de la façon dont NodeJS fonctionne la file d'attente de messages RabbitMQ

Articles Liés

Voir plus