2006年09月22日 02:30 [Edit]

javascript - event.target で IDを省略

DHTMLの世界では、DOM objectにはみんなIDをふっておいて、document.getElementByID(id)でobjectを取得してそれをいじくるというのが王道ですが、いじくる対象がイベントを発生させたobject自身しかないならIDは省略できるいうお話。


よくあるのは、

function foo(id){
  // あるいは 
  // function $(id){ return document.getElementById(id) } 
  // を定義しておいて$(id)を使う
  var elem = document.getElementById(id);
  // ...
}

とやってから

<a href="#" id="bar" onclick="foo('bar')"> 

みたいにして使うケースですが、もしいじりたい対象がこの<a>タグ自体しかないなら、なんだかIDふるのはマンドクサイ。

<a href="#" onclick="foo(self)"> 

みたくなんで書けないのかなあ、と思っていたのですが、こうすればよいだけでした。

function foo(evt){
  var elem = evt.target;
  // ...
}

で、呼び出す時は

<a href="#" onclick="foo(event)"> 

とやればいい。以下、実例です。

マウスは外 にあります。枠の中にマウスをかざすとどうなるか?

ソースは以下のとおりです。IE5とSafariとFirefoxで動作検証しました。

<script>
function mouseover(evt){
  evt.target.innerHTML = 'マウスは中';
  evt.target.style.backgroundColor = 'yellow';
}
function mouseout(evt){
  evt.target.innerHTML = 'マウスは外';
  evt.target.style.backgroundColor = 'transparent';
}
</script>
<p style="border: outset 1px; padding: 0.5em">今
<span onmouseover="mouseover(event)" onmouseout="mouseout(event)"
 style="border: dotted 1px; padding: 0.25em">マウスは外</span>
にあります。枠の中にマウスをかざすとどうなるか?
</a>

多分どこかで誰かがすでに書いていると思うのですが、見つからなかったので備忘録代わりに。

他にもelement.addEventListener() を使う手もあって、こちらはもっとエレガントに見えますが、こちらの手は古めのブラウザーでも動くので、手軽に書きたいときには重宝しそうです。

Dan the Javascripter


この記事へのトラックバックURL

この記事へのコメント
仕事で似たような質問を受けたとき、このエントリが非常に参考になりました
Posted by TRIPLE at 2006年09月26日 00:00
thisも実装依存だったのか、などとためになりつつ、おまいらたまにはMosaicとかNeetscape Navigator 2とかのことも思い出してあげてください。
Posted by Bar at 2006年09月22日 16:42
sawatさん、
ありがとうございます。
実装依存はjavascriptで一番嫌なところですね。
function $(id){ return document.getElementById(id); }
みたく
function _(evt){ return evt.target || evt.srcElement }
のようなWrapperを書かなきゃ行けないのかあ....
Dan the Javascripter, not JScripter
Posted by at 2006年09月22日 13:25
IE6で動かない。
s/event\.target/(event.target || event.srcElement)/g
でOKでしょう。
Posted by sawat at 2006年09月22日 09:36
WinXP2とIE6でエラーが発生しました。
--
ライン:166
文字:3
エラー:'target'はNullまたはオブジェクトではありません。
Posted by weasel at 2006年09月22日 07:40
Ryosukeさん、
そうなのです。が、DOM以前のjavascriptのthisは、
昔はdocument全体を指していたりしたので、使うのに躊躇しちゃいます。
まだIDが使えなかった頃に、
<form name="f">
<input type="text" onclick="handle(this)">
</form>
じゃ期待通り動かなくて、
<input name="n" type="text" onkeyup="handle(f.n)">
とやんないと駄目だった記憶がまだ残っているので。
Dan the Javascripter
Posted by at 2006年09月22日 06:12
こんにちわです
onclick="foo(self)"
みたいなのって、
onclick="foo(this)"
って書くんじゃダメなんですか?
javascriptのthisって気持悪いってよく言われますけど、イベントハンドラ内に直接書く分には分かりやすいと思うのだけど・・・
Posted by Ryosuke at 2006年09月22日 05:14