ブラウザに応じたJavaScriptの書き方

divの中にp、
pの中にspan、
spanの中にinputがあるとして、
クリックしたらそれぞれの要素のタグををalertで表示させたいとき、

（例１）
<div onClick="a=event.target || event.srcElement;alert(a.tagName)">div
　<p>p
　　<span>span
　　　<input type="button" value="input">
　　</span>
　</p>
</div>

で良いと思います。
（IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み）


ただ、onClick内をスッキリさせたいので

（例２）
<script>
function whereYouClick1(){
　a=event.target || event.srcElement;
　alert(a.tagName);
}
</script>
<div onclick="whereYouClick1();">div
　<p>p
　　<span>span
　　　<input type="button" value="input">
　　</span>
　</p>
</div>

とすると、FirefoxとLunascapeで動かなくなります（よね？）。



苦肉の策として


（例３）
<script>
function whereYouClick2(){
　alert(a.tagName);
}
</script>
<div onclick="a=event.target || event.srcElement;whereYouClick2()">div
　<p>p
　　<span>span
　　　<input type="button" value="input">
　　</span>
　</p>
</div>


としたらすべてのブラウザで動いたのですが、腑に落ちません。
これなら（例１）のままの方がすっきりして良かったような気がします。

ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、
Forefox, Lunascapeのために（例３）の書き方にならざるを得なくなると思いますが、気持ち悪いです。
もっときれいな書き方はないのでしょうか。

また、上の例では一旦
a=event.target || event.srcElement;
としてから、
alert(a.tagName)
とやっていますが、
alert(event.target.tagName || event.srcElement.tagName)
とやったらIEではエラーとなりました。そんなもんなんでしょうか。


基本的な事柄で申し訳ありませんが、よろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2011/04/27 12:30

＞（例２）

<script type="text/javascript">
function whereYouClick1(evt){
　var a = evt.target || evt.srcElement;
　alert(a.tagName);
}
</script>

<div onclick="whereYouClick1(event)">div
　<p>p
　　<span>span
　　　<input type="button" value="input">
　　</span>
　</p>
</div>



設定するのにaddEventListener（attachEvent）を利用する方法もあります。

＜参考＞
ほかにも情報はいっぱいあるので、ぐぐってみてください。
http://www.findxfine.com/programming/javascript/ …
http://archiva.jp/web/javascript/event-object.html

この回答へのお礼

あ！出来ました！

ありがとうございます！！

色々研究してみます。

お礼日時：2011/04/27 12:59