Explication de la différence entre l'emplacement des Js placés dans le fichier HTML-tutoriel HTML-php.cn

Explication de la différence entre l'emplacement des Js placés dans le fichier HTML

高洛峰

Libérer： 2017-03-14 18:11:29

original

1580 Les gens l'ont consulté

Cette question a toujours été déroutante pour les débutants. Comprenez d'abord où js peut être placé en HTML, qui sont head et body. La plupart des gens se le mettent dans la tête. Quand je l’apprenais, je l’ai suivi confusément et je l’ai mis dans la tête, je ne sais pas pourquoi ? Aujourd'hui, parlons de la différence entre ces deux endroits :
Regardons d'abord un bout de code html :

<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="test.js"></script> 

</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn">按钮</button> 

</body> 
</html>

Copier après la connexion

var test = function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
} 

document.getElementById("btn").onclick=test;

Copier après la connexion

Si ce code est placé dans la tête, il ne s'exécutera pas . Pourquoi?
Il s'agit de l'ordre d'exécution du HTML Pour être plus précis, il ne s'agit pas de l'ordre d'exécution du HTML, mais de l'ordre d'exécution de js. Lorsque HTML est exécuté d'en haut vers , il entre dans le fichier test.js. La précédente ne sera pas exécutée, c'est-à-dire que celle encapsulée par la fonction ne sera pas exécutée à ce moment-là. Accédez à la page et récupérez l'élément dont l'ID d'élément est btn. Mais pour le moment, la page HTML n'a pas été chargée. Il n'est certainement pas possible d'obtenir l'élément avec l'identifiant btn. Une erreur sera signalée. À ce moment-là, quelqu'un a dit qu'il pourrait être modifié par le code suivant :

document.body.onload = function(){ 
document.getElementById("btn").onclick=test; 
};

Copier après la connexion

Mais l'écrire de cette façon n'est pas aussi bon que de l'écrire devant .
Avez-vous remarqué qu'il n'y a pas de crochets dans test au-dessus de [document.getElementById("btn").onclick=test;], alors que se passera-t-il s'il est remplacé par [test()]

<🎜 ? >

Explication de la différence entre lemplacement des Js placés dans le fichier HTML

Le résultat est tel qu'indiqué sur la figure. La page est chargée comme ceci, et il n'y a pas de réponse lorsque vous cliquez sur le bouton. Modifiez le code js comme suit :

var test=function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
return function(){ 
alert("aaaa"); 
}; 
} 

document.getElementById("btn").onclick=test();

Copier après la connexion

Lorsque la page est chargée, elle ressemble toujours à ce qui précède. Lorsque vous cliquez sur le bouton, une boîte apparaît avec le contenu "aaaa" ; le bouton est cliqué La valeur renvoyée dans la fonction

est exécutée. Autrement dit, lors de l'ajout de parenthèses, la fonction sera exécutée même si l'événement n'est pas déclenché. Lorsque l'événement est déclenché, la valeur de retour de la fonction est exécutée . Lorsque les parenthèses ne sont pas incluses, la fonction est exécutée uniquement lorsque l'événement est déclenché.
événement html
déclencheur , que peut-on écrire dans le contenu ? •Par exemple, onclick="";ce qui peut être écrit entre guillemets doubles. De manière générale, vous pouvez écrire des fonctions, par exemple onclick="test();". Que peut-on écrire d'autre à part cela ? Pouvons-nous omettre ce point-virgule ?
•Regardez le code js ci-dessus, il y a un point-virgule dans chaque ligne. Le but des points-virgules est de masquer les déclarations. Cela signifie que vous pouvez écrire du code js en onclick. Écrivez un essai, comme suit

<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 


</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn" onclick="var espan = document.createElement(&#39;span&#39;);espan.innerHTML=&#39;添加&#39;;document.getElementById(&#39;target&#39;).appendChild(espan);">按钮</button> 

</body> 
</html>

Copier après la connexion

•Les résultats d'exécution sont les suivants :

Explication de la différence entre lemplacement des Js placés dans le fichier HTML

Cela signifie qu'il peut être exécuté. Cela montre que vous pouvez mettre plus que de simples noms de fonctions.

Méthode de liaison d'événement ?
•Il existe deux méthodes couramment utilisées pour la liaison d'événements. La première consiste à ajouter du code js à l'événement, comme introduit précédemment. Par exemple : onclick="test();". L'inconvénient de cette méthode de liaison est qu'il faut modifier le code que l'artiste a déjà écrit.
•Une autre façon consiste à utiliser l'ID lorsque j'ai commencé à écrire le code. L'artiste n'a qu'à ajouter l'ID à chaque élément. Il n'est pas nécessaire de modifier le code HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!