Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js-HTML-Tutorial-php.cn

Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js

高洛峰

Freigeben： 2017-03-14 18:11:29

Original

1597 Leute haben es durchsucht

Diese Frage war für Anfänger schon immer verwirrend. Verstehen Sie zunächst, wo js in HTML platziert werden kann, nämlich head und body. Die meisten Leute setzen es in den Kopf. Als ich es lernte, folgte ich ihm verwirrt und setzte es mir in den Kopf, ich weiß nicht warum? Lassen Sie uns heute über den Unterschied zwischen diesen beiden Orten sprechen:
Sehen wir uns zunächst einen Teil des HTML-Codes an:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Wenn dieser Code im Kopf platziert wird, wird er nicht ausgeführt . Warum?
Hier geht es um die laufende Reihenfolge von HTML. Genauer gesagt handelt es sich nicht um die laufende Reihenfolge von HTML, sondern um die laufende Reihenfolge von js. Wenn HTML von oben nach ausgeführt wird, wird es in die Datei test.js eingegeben. Der vorherige Satz wird nicht ausgeführt, dh der von der Funktion umschlossene Satz wird nicht ausgeführt. Zu diesem Zeitpunkt wird der letzte Satz ausgeführt. Gehen Sie zur Seite und rufen Sie das Element ab, dessen Element-ID btn ist. Zu diesem Zeitpunkt wurde die HTML-Seite jedoch noch nicht geladen. Es ist definitiv nicht möglich, das Element mit der ID btn abzurufen. Es wird ein Fehler gemeldet. Zu diesem Zeitpunkt sagte jemand, dass es in den folgenden Code geändert werden könnte:

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

Nach dem Login kopieren

Aber es ist nicht so gut, es auf diese Weise zu schreiben, wie es vor zu schreiben.
Ist Ihnen aufgefallen, dass es im Test oben [document.getElementById("btn").onclick=test;] keine Klammern gibt? Was passiert also, wenn es in [test()] geändert wird? >

Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js Das Ergebnis ist wie in der Abbildung dargestellt. Die Seite wird so geladen und es erfolgt keine Reaktion, wenn auf die Schaltfläche geklickt wird. Ändern Sie den js-Code wie folgt:

Wenn die Seite geladen wird, sieht sie immer noch wie oben aus. Wenn Sie auf die Schaltfläche klicken, wird ein Feld mit dem Inhalt „aaaa“ angezeigt Die Schaltfläche wird angeklickt. Der in der

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

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

Nach dem Login kopieren

-Funktion

zurückgegebene Wert wird ausgeführt. Das heißt, beim Hinzufügen von Klammern wird die Funktion auch dann ausgeführt, wenn das -Ereignis nicht ausgelöst wird. Wenn das Ereignis ausgelöst wird, wird der Rückgabewert der Funktion ausgeführt . Wenn keine Klammern enthalten sind, wird die Funktion nur ausgeführt, wenn das Ereignis ausgelöst wird. HTML-Ereignis
Trigger
, was kann in den Inhalt geschrieben werden? •Zum Beispiel kann onclick="";what in doppelte Anführungszeichen geschrieben werden. Im Allgemeinen können Sie Funktionen schreiben, zum Beispiel onclick="test();". Was kann man sonst noch schreiben? Können wir dieses Semikolon weglassen? •Sehen Sie sich den js-Code oben an, in jeder Zeile steht ein Semikolon. Der Zweck von Semikolons besteht darin, Aussagen zu verschleiern. Das bedeutet, dass JS-Code in OnClick geschrieben werden kann. Schreiben Sie einen Versuch wie folgt

•Die Laufergebnisse sind wie folgt:

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

Nach dem Login kopieren

Erläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js Das bedeutet, dass es ausgeführt werden kann. Dies zeigt, dass Sie mehr als nur Funktionsnamen eingeben können.

Ereignisbindungsmethode?
•Es gibt zwei häufig verwendete Methoden zur Ereignisbindung. Eine davon ist das Hinzufügen von js-Code zum Ereignis, wie zuvor beschrieben. Zum Beispiel: onclick="test();". Der Nachteil dieser Bindungsmethode besteht darin, dass Sie den Code ändern müssen, den der Künstler bereits geschrieben hat.
•Eine andere Möglichkeit besteht darin, die ID zu verwenden, als ich mit dem Schreiben des Codes begann. Der Künstler muss die ID nur zu jedem Element hinzufügen. Der HTML-Code muss nicht geändert werden.

Das obige ist der detaillierte Inhalt vonErläuterung des Unterschieds zwischen der Position der in der HTML-Datei platzierten Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!