Comprendre les compétences de liaison JS events

Comprendre les compétences de liaison JS events_javascript

WBOY

Libérer： 2016-05-16 15:19:08

original

1230 Les gens l'ont consulté

Cet article fournit une analyse détaillée des événements de liaison JS pour votre référence. Le contenu spécifique est le suivant

Il existe un problème de compatibilité avec les événements de liaison. Dans les premières versions d'IE, obj.attachEvent() était utilisé, tandis que d'autres navigateurs utilisaient addEventListener().
Les deux méthodes ont trois paramètres, à savoir : type d'événement, fonction d'événement , le dernier est valeur booléenne , vrai ou faux.
true signifie s'exécuter dans la phase de capture d'événement, false signifie s'exécuter dans la phase de bouillonnement d'événements.
Étant donné qu'IE ne prend en charge que le bouillonnement d'événements, dans la plupart des cas, le gestionnaire d'événements est ajouté à l'étape de bouillonnement du flux d'événements, qui est par défaut "false"
Cela maximise la compatibilité avec différents navigateurs. Il est préférable d'ajouter des gestionnaires d'événements à la phase de capture uniquement lorsque vous devez intercepter l'événement avant qu'il n'atteigne la cible. Il n'est pas recommandé d'enregistrer les gestionnaires d'événements pendant la phase de capture d'événements, sauf si cela est spécifiquement nécessaire.
Compatible avec les liaisons d'événements de différents navigateurs :

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

Copier après la connexion

Lors de l'appel, notez que la fonction de rappel n'a pas besoin de parenthèses, comme setTimeout.

Cette partie est relativement facile à comprendre. Quant au dernier paramètre, je pense que beaucoup de gens ne le comprennent pas très bien. Bref, j'ai encore besoin d'écrire un programme pour le tester avant de vraiment le comprendre.

Partie HTML :

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

Copier après la connexion

contenu js : (premier cas)

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

Copier après la connexion

Contenu js : (Deuxième cas)

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

Copier après la connexion

Contenu js : (Troisième cas)

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

Copier après la connexion

Contenu js : (Quatrième cas)

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

Copier après la connexion

contenu js : (cinquième 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>

Copier après la connexion

Contenu js : (Sixième cas)

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

Copier après la connexion

Après avoir lu les résultats correspondant aux six situations ci-dessus, je pense que vous pouvez déjà comprendre profondément la différence entre le dernier paramètre étant vrai ou faux.