2

私がJavascriptを学習するために使用している教科書は、次のコードを使用して、ユーザーが段落をクリックするたびにアラートダイアログを表示します。

var paras = document.getElementsByTagName("p");
for (var i=0; i<paras.length; i++) {
 paras[i].onclick = function() {
  alert("You clicked on a paragraph.");
 }
}

すべての要素をループする理由はわかりませんpが、代わりにそれらを識別して、onclickイベントハンドラーをそれにアタッチするだけです。このような：

var paras = document.getElementByTagName('p');
paras.onclick = alert("You clicked on a paragraph.");

それは同じことをしませんか？p要素をループする必要があるのはなぜですか？

4

3 に答える 3

2

いいえ、それは絶対に同じことをしません：

  1. イベントハンドラーをHTMLノードリストにアタッチすることはできません（できますが、何も起こりません）。
  2. 例のような関数ではなく、ステートメントの結果に「onclick」を設定しようとしています。alert()（とにかく機能しないので、実際には問題ではありません。）

これで、1つのイベントハンドラーでクリックを処理する方法がありますが、本を読み続けさせていただきます:-)

編集—ポイント2について詳しく説明すると、次のようになります。

alert("hi");

関数呼び出しです。その値は、その関数の呼び出しから返されるものになります。したがって、

paras.onclick = alert("You clicked on a paragraph.");

「paras」が参照するオブジェクトの「onclick」プロパティを設定し、から返された値に設定しますalert()（おそらく常にundefined）。

あなたの本のサンプルコードのように、「onclick」ハンドラーのようなものは関数である必要があります。これがサンプルコードの途中で行われていることです。個々の<p>DOM要素の「onclick」プロパティが関数に設定されています。その関数の中alert()には、への呼び出しがあります。

于 2012-06-23T19:25:34.963 に答える
1

あなたが持っているとしましょう

​&lt;p>​First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

だから、のようなvar paras = document.getElementsByTagName("p");コレクションを返しますp

[<p>​First Paragraph​&lt;/p>​, <p>​Second Paragraph​&lt;/p>​, <p>​Third Paragraph​&lt;/p>​]

記述paras.onclick = alert("You clicked on a paragraph.");した場合、要素自体ではなく要素parasの配列であり、要素のみにイベントがあるため、機能しません。したがって、コレクションをループして、各要素のイベントハンドラーを個別に追加する必要があります。pphtmlp

1つしかない場合でも、 1つの要素をp含む配列が返されます。p

​&lt;p>​First Paragraph</p>

そしてvar paras=document.getElementsByTagName("p");戻ってきます[<p>​First Paragraph​&lt;/p>​]

したがって、イベントハンドラーを追加するには、次のように記述します。

paras[0].onclick = function() { // 0 is the first element in the collection
     alert(this.innerHTML);
 }

これが例です。プロセスを理解するのに役立つことを願っています。

于 2012-06-23T19:49:37.653 に答える
0

いいえ、それは機能しません。

複数のノードが同じ名前を持つことができるため（したがって、「要素」の複数形）、関数document.getElementsByTagNameはノードの配列を返します。ページに複数の段落を含めることができ、この関数はそれらすべてを返します。段落が1つしかない場合でも、1つの要素を含む配列を取得します。

一方、document.getElementById関数を使用して、そのIDを持つノードを選択することもできます。この場合、IDはドキュメント内で一意であると想定されているため、結果は単一ノードになります。

var para = document.getElementByTagId('myParagraph');
paras.onclick = function(){ alert("You clicked on a paragraph.") };
于 2012-06-23T19:34:58.173 に答える