HTMLファイル内に配置されるJsの場所の違いを解説-htmlチュートリアル-php.cn

HTMLファイル内に配置されるJsの場所の違いを解説

高洛峰

リリース： 2017-03-14 18:11:29

オリジナル

1538 人が閲覧しました

この質問は初心者にとって常に混乱を招きます。まず、HTML 内のどこに js を配置できるか、つまり head と body を理解します。ほとんどの人が頭の中に入れています。私はそれを学んでいるとき、混乱してそれを頭の中に入れてしまったのですが、なぜですか？今日は、これら 2 つの場所の違いについて話しましょう:
まず 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>

ログイン後にコピー

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

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

ログイン後にコピー

このコードが head に配置されている場合、コードは実行されません。なぜ？
これはHTMLの実行順序についてですが、正確にはHTMLの実行順序ではなく、jsの実行順序です。 HTML が上からまで実行されると、test.js ファイルに入ります。前の文、つまり関数でラップされたものは実行されません。この時点では、最後の文が実行されます。ページに移動し、要素 ID が btn である要素を取得します。ただし、この時点では HTML ページはロードされていません。 ID btn の要素を取得することは絶対に不可能です。エラーが報告されます。このとき、次のコードに変更できると誰かが言いました:

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

ログイン後にコピー

しかし、このように書くのは、の前に書くのと同じくらい良くありません。
上記の [document.getElementById("btn").onclick=test;] の test に括弧がないことに気づきましたか?

HTMLファイル内に配置されるJsの場所の違いを解説

に変更するとどうなりますか?図に示すように、ページは次のようにロードされ、ボタンをクリックしても応答がありません。 js コードを次のように変更します。

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

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

ログイン後にコピー

ページがロードされると、ボタンをクリックすると、関数が実行されることを示す内容のボックスが表示されます。ボタンがクリックされたときの戻り値。つまり、括弧を追加すると、イベントがトリガーされなくても関数が実行されます。関数の戻り値は、イベントがトリガーされたときに実行されます。括弧が含まれていない場合、関数はイベントがトリガーされた場合にのみ実行されます。

htmlイベントトリガー、コンテンツには何を記述できますか？
•例えば、onclick="";ダブルクォーテーション内に記述できるもの。一般に、onclick="test();" などの関数を作成できます。これ以外に何を書くことができますか? このセミコロンを省略できますか?
•上記の JS コードを見てください、どの行にもセミコロンがあります。セミコロンの目的は、ステートメントを難読化することです。つまり、onclick で js コードを記述できます。次のように try を書きます

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

ログイン後にコピー

•実行結果は以下の通りです:

HTMLファイル内に配置されるJsの場所の違いを解説

実行できることを意味します。これは、関数名以上のものを入力できることを示しています。

イベントバインド方法?
•イベントバインディングには2つの一般的に使用される方法があります。1つは、前に紹介したように、イベントにjsコードを追加する方法です。例: onclick="test();"。このバインド方法の欠点は、アーティストがすでに作成したコードを変更する必要があることです。
•もう 1 つの方法は、コードを書き始めたときに ID を使用することです。アーティストは各要素に ID を追加するだけで済みます。 HTML コードを変更する必要はありません。

以上がHTMLファイル内に配置されるJsの場所の違いを解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。