Verstehen von JS-Bindungsereignissen_Javascript-Fähigkeiten-js-Tutorial-php.cn

Verstehen von JS-Bindungsereignissen_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:19:08

Original

1230 Leute haben es durchsucht

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);
 }
 }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.