suchen

Heim >Web-Frontend >js-Tutorial >Code-Analyse des Ereignis-Bubbling-Verhältnisses

Code-Analyse des Ereignis-Bubbling-Verhältnisses

不言
不言Original
2018-07-14 16:06:572311Durchsuche

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>

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!

php JavaScript rabbitmq 事件
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse, wie NodeJS die Nachrichtenwarteschlange RabbitMQ betreibtNächster Artikel：Analyse, wie NodeJS die Nachrichtenwarteschlange RabbitMQ betreibt

In Verbindung stehende Artikel

Mehr sehen