Heim > Artikel > Web-Frontend > Verstehen von JS-Bindungsereignissen_Javascript-Fähigkeiten

Verstehen von JS-Bindungsereignissen_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:19:081231Durchsuche

Dieser Artikel enthält eine detaillierte Analyse der JS-Bindungsereignisse als Referenz. Der spezifische Inhalt ist wie folgt

Es gibt ein Kompatibilitätsproblem mit Bindungsereignissen. In früheren Versionen von IE wurde obj.attachEvent() verwendet, während andere Browser addEventListener() verwendeten.
Beide Methoden haben drei Parameter, nämlich: Ereignistyp, Ereignisfunktion , der letzte ist Boolescher Wert , wahr oder falsch.
„true“ bedeutet die Ausführung in der Ereigniserfassungsphase, „false“ bedeutet die Ausführung in der Ereignis-Bubbling-Phase.
Da IE nur das Event-Bubbling unterstützt, wird in den meisten Fällen der Event-Handler zur Bubbling-Phase des Ereignisflusses hinzugefügt, der standardmäßig „false“
ist Dies maximiert die Kompatibilität mit verschiedenen Browsern. Es ist am besten, Ereignishandler nur dann zur Erfassungsphase hinzuzufügen, wenn Sie das Ereignis abfangen müssen, bevor es das Ziel erreicht. Es wird nicht empfohlen, Ereignishandler während der Ereigniserfassungsphase zu registrieren, es sei denn, dies ist ausdrücklich erforderlich.
Kompatibel mit Ereignisbindungen verschiedener Browser:

 function addEvent(obj, eventType, callback, bubble){
 if(obj.addEventListener){
  obj.addEventListener(eventType, callback, bubble);
 }else{
  obj.attachEvent(eventType, callback, bubble);
 }
 }

Beachten Sie beim Aufruf, dass die Callback-Funktion keine Klammern benötigt, ähnlich wie bei setTimeout.

Dieser Teil ist relativ einfach zu verstehen. Ich glaube, viele Leute verstehen ihn nicht sehr gut. Kurz gesagt, ich muss noch ein Programm schreiben, um ihn zu testen, bevor ich ihn wirklich herausfinden kann.

HTML-Teil:

<!doctype html>
<html lang="en">
  <head>
  <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="">
    <title>Document</title>
  <!--css js 文件的引入-->
  </head>
  <body>
    <div id="out"> 
    <p>我是路人甲</p>
    <div id="middle"> 
      <div id="inner">最里面的</div> 
    </div> 
    <p>我是路人乙</p>
    </div>
  </body>
</html>

js-Inhalt: (erster Fall)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：inner-------middle------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false); 
</script>

js-Inhalt: (Zweiter Fall)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},true); 
</script>

JS-Inhalt: (Dritter Fall)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out------inner-------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

JS-Inhalt: (Vierter Fall)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------middle------inner
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

js-Inhalt: (fünfte Situation)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：middle-------inner------out
  out.addEventListener('click',function(){alert("我是最外面的");},false);   
  middle.addEventListener('click',function(){alert("我是中间的");},true);  
  inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>

JS-Inhalt: (Sechster Fall)

<script>
  var out = document.getElementById('out'); 
  var middle = document.getElementById('middle'); 
  var inner = document.getElementById('inner'); 
  //点击inner时，触发顺序为：out-------inner------middle
  out.addEventListener('click',function(){alert("我是最外面的");},true);   
  middle.addEventListener('click',function(){alert("我是中间的");},false);    
  inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>

Nachdem ich die Ergebnisse der oben genannten sechs Situationen gelesen habe, glaube ich, dass Sie den Unterschied zwischen dem letzten Parameter, ob er wahr oder falsch ist, bereits zutiefst verstehen können.

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：Detaillierte Erläuterung der Techniken der Javascript-Template-Engine mustache.js_javascriptNächster Artikel：Detaillierte Erläuterung der Techniken der Javascript-Template-Engine mustache.js_javascript

In Verbindung stehende Artikel

Mehr sehen