Analyse du code du taux de bouillonnement des événements-js tutoriel-php.cn

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

不言

Libérer： 2018-07-14 16:06:57

original

2261 Les gens l'ont consulté

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>

Copier après la connexion

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!