HTMLページ内のタグに対してのイベント

解決済

質問者：yukisin19
質問日時：2010/10/12 18:00
回答数：3件

HTMLページ内のタグに対してのイベント

getElementsByTagNameで指定したタグの部分（画像やリンク）をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。

試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。
あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。

ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
　　<title></title>
　　<script type="text/javascript">
　　　window.onload = function ini(){
　　　　document.getElementsByTagName("img").onClick = alert("これは画像です");
　　　}
　　</script>
</head>
<body>
　<img src="..." />
　<img src="..." />
　<img src="..." />
　<img src="..." />
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： fujillin
回答日時：2010/10/12 18:59

＞ひとつひとつにIDを割り当てるというやり方でなくて、～～

element.onclick = ～～の方法だと、一つ一つにイベントを割り当てていく方法になります。
（例示の場合、getElementsByTagNameは配列になるので、直接onclickではうまくいかない）

どうせならまとめてひとつのイベントをドキュメントに設定しておけば、代用できると思いますよ。
No1様の方法と同じだけれど、簡略化バージョン。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<div>
<img src="a">
<img src="b">
</div>
<div>
<img src="c">
<img src="d">
</div>

<script type="text/javascript">

</script>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

こちらは画像のパスも表示されるのですね。
No.1様のところでも書きましたが、もう少し勉強してから
応用させて頂きたいと思います。

ありがとうございました。

通報する

お礼日時：2010/10/13 16:19

No.2ベストアンサー

回答者： nekomikekamo
回答日時：2010/10/12 18:32

単純に直すと以下の通り？

window.onload = function(){
var imgs = document.getElementsByTagName("img");
for(var i=0;i<imgs.length;i+=1){
imgs[i].onclick = function(){
alert("これは画像です。");
}
}
}

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます

まさにこういう書き方を知りたかったんです。
No.3様にご指摘いただいていましたが、
getElementsByTagNameで得られるのは配列だということを
分かっていませんでした。

今回のプログラムはこの書き方でいきたいと思います。
ありがとうございました。

通報する

お礼日時：2010/10/13 16:25

No.1

回答者： babu_baboo
回答日時：2010/10/12 18:30

こもじで onclick 。

//@cc_on
var Handler = function (evt) {
var node = evt./*@if (1) srcElement @else@*/ target /*@end@*/;
var doc = node.ownerDocument;
var win = doc./*@if (1) parentWindow @else@*/ defaultView /*@end@*/;
alert(node.nodeName);
alert(node.tagName);
alert(node.id);

}

document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/
'click',Handler, false);