Code-Analyse des Ereignis-Bubbling-Verhältnisses-js-Tutorial-php.cn

Code-Analyse des Ereignis-Bubbling-Verhältnisses

不言

Freigeben： 2018-07-14 16:06:57

Original

2261 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Codeanalyse der Ereignisblase vorgestellt, die einen bestimmten Referenzwert hat. Freunde in Not können sich darauf beziehen

Das Konzept der Blase ist, wenn a Untergeordnetes Element löst ein Ereignis aus, das entsprechende Vorfahrenelement löst ebenfalls dasselbe Ereignis aus

(vorausgesetzt, das übergeordnete Element hat ebenfalls dasselbe Ereignis hinzugefügt)

Beispiel: Der Sohn hat einen Onclick-Vorfahren zehn Yatsura hat auch Onclick

Beim Klicken auf den Sohn wird auch das Klickereignis der 18. Generation des Vorfahren ausgelöst

Manchmal verursacht diese Situation viele Probleme, daher muss Blasenbildung verhindert werden

Nur angeklickte Elemente lösen Ereignisse aus

Nicht alle Ereignisse werden sprudeln

onblur onfocus onload onerror not

Tatsächlich gibt es drei Prozesse zum Auslösen von Ereignissen: Capture Phase--->In der Zielphase---->Bubbling-Phase

Standardmäßige Browser-Blasenreihenfolge untergeordneter Elemente-->Parent-->body-->document-- ->window

IE untergeordnetes Element-->parent-->body-->document

Als nächstes ist der Code sehr einfach, führen Sie einfach einen Kompatibilitätsprozess durch

<!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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse, wie NodeJS die Nachrichtenwarteschlange RabbitMQ betreibt

Wie JavaScript die Datei-Download-Funktion implementiert

Das obige ist der detaillierte Inhalt vonCode-Analyse des Ereignis-Bubbling-Verhältnisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!