srcElement [JavaScript]
◆event.srcElement プロパティ
event.srcElement
前回のエントリーで、addEventListener や attachEvent で動的に登録されたイベントハンドラが、イベント発生元の要素を知るために使う event.target プロパティを取り上げました。
そして、event.target プロパティが、Internet Explorer に対応していないことも書きました。
そこで使えるのが、event.srcElement プロパティです。
ところが。
やっぱりこいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。
まず、対応ブラウザについて。
event.srcElement プロパティに対応しているのは、Internet Explorer、Opera、Safari、Google Chrome といったところです。
Firefox は対応してないんです（代わりに、event.target プロパティを使います）。
つまり、Opera、Safari、Google Chrome といったブラウザは、event.target プロパティも、event.srcElement プロパティも使えるんです。
また、注意点として、前回同様 window の動的イベントに対する挙動が挙げられます。
例えば、window の onload イベントでイベントハンドラを起動させ、そのイベントハンドラが受け取った引数の event.srcElement プロパティを見てみると、ブラウザごとに以下のようになっています。
◆window イベントに対する event.srcElement プロパティの中身| ブラウザ | srcElementプロパティ |
|---|---|
| Internet Explorer 8 | null |
| Firefox 3.6.13 | undefined |
| Opera 9.64 | HTMLDocument |
| Safari 5.0.3 | HTMLDocument |
| Google Chrome 8.0.552.215 | HTMLDocument |
Internet Explorer に至っては null だとよ、はっはっはっ･･････。
というわけで、window で動かしたいイベントハンドラは、いくつか制約が出てきます（前回のエントリーの繰り返しですが、書いておきます）。
- window がひとつであることがわかっており、かつ window 用のイベントハンドラが他と切り分けられる場合、event.srcElement プロパティを無視し、window インスタンスを使って、しかるべき処理を実装する。
- どうしてもイベント発生元の window インスタンスを知りたい場合、イベントハンドラに匿名関数などを仕込み、ハンドルしたい処理関数に対して引数でインスタンス参照を投げてやる。
･･････など。
今回の検証に使ったソースは、こちらです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>srcElemet</title>
<script type="text/javascript">
//<![CDATA[
// 環境エラー
function errorEnvironment() {
alert('ご使用の環境では、このスクリプトはご使用できません。');
}
// イベントを追加する addEvent
function addEvent(evt, func, cap) {
if (this.addEventListener)
this.addEventListener(evt, func, cap);
else if (this.attachEvent)
this.attachEvent('on' + evt, func);
else
errorEnvironment();
}
Object.prototype.addEvent = addEvent;
HTMLDocument.prototype.addEvent = addEvent;
Element.prototype.addEvent = addEvent;
// ボタンのクリック
function onButtonClick(evt) {
document.getElementById('Text1').value = evt.srcElement;
}
// ウィンドウ ロードでボタン クリック イベントを追加
window.addEvent('load',
function (evt) {
var elm = document.getElementById('Button1');
elm.addEvent('click', onButtonClick, false);
document.getElementById('Text2').value = evt.srcElement;
},
true
);
//]]
</script>
</head>
<body>
<input id="Button1" type="button" value="button" /><br/>
<input id="Text1" type="text" /><span>srcElement</span><br />
<input id="Text2" type="text" /><span>srcElement(window)</span><br />
</body>
</html>
次回は、event.target プロパティと event.srcElement プロパティの差異を吸収する実装方法を予定しています。
みみちゃん さん
-
nice! 116
記事 47
テーマ パソコン・インターネット
プロフィール
ブログを紹介する
ＩＥはｎｕｌｌなんですね、、、ユニークですねｗ 個性でしょうか？ｗ
by One-for-you (2010-12-19 00:50)
IEは、タ●ですね；；；。
Firefox が一番まっとうな気がします。
by みみちゃん (2010-12-19 11:47)
なるほどね。
今 IE と Google と firefox使い比べ中
素人だから良くわからないけど わからないなりに 何か感じるかと思ってね。
by ゆうみ (2010-12-19 13:05)
ソネブロだけでも、ブラウザの違いは感じられますよ。
記事の本文や追記を書いているとき、IE だと右クリックで出てくるコンテキストメニューで [コピー] や [貼り付け] ができるけど、なにも拡張してない Firefox だと、これができません。
不便でしゃーない；；；。
by みみちゃん (2010-12-19 17:41)
これは 実感したよ。
Googleもそうだった。
あと行間がせまいのもこの二つ
なんでなんだかわからなかったけど・・・
by ゆうみ (2010-12-20 12:46)
そうなんですよ！
ソネブロの記事エディターは、ブラウザによって、記事に埋め込まれる HTML タグが違うんですよ！
だから、見た目が変わっちゃうんですね。
困ったもんです；；；。
by みみちゃん (2010-12-20 19:46)
さて、本題。。。なんで復習の如く遡及してコメント書いているかというと、貴殿があまりに記事書いてるから、ついていけないから、まず復習Modeに入ってます。 この先は、しばし読ませて頂きながら（時間かかるのは明白ですが）、Referenceしながら咀嚼Modeに入りたい の でした
以上、ひたすら復習に徹する 言い訳 でした
そんな 言い訳で 良いわけ???
ご容赦下されｗｗｗ
裏、書いたよ！ ＜－一応、宣伝ｗ
では、また、シラフの時に、ねｗ
by One-for-you (2010-12-28 01:22)
そうそう、HTMLのTagは、プロ語無きがするよ
でもね、そのまま突っ走って、そのほうが、自己学習意欲が沸くからｗ
by One-for-you (2010-12-28 01:23)
どじょどじょｗ。
いやいや、ホントは、コメントを頂いて、マジでありがたいんです。
自分でコツコツやってるだけだと、どれだけ自分に「ストイック」になれるかの勝負になってくるので、コメントや nice! を頂けると、ホントにありがたいんですよね。
応援してもらってる気持ちになるというか･･････；；；。
なお、この blog は、自分が会社で見れるリファレンス＆ノウハウ集に育てたいと思っています。
なので、自分が自宅で培って会社で見たい情報は、容赦なくエントリーにさせて頂きますｗｗｗ。
by みみちゃん (2010-12-28 15:35)