target：mx-Lab：SSブログ

	ブログをはじめるログイン

JavaScript イベントハンドラの..｜srcElement ブログトップ

target　[JavaScript] [編集]

◆event.target プロパティ

event.target

JavaScript のイベントハンドラ（イベントリスナー）を addEventListener や attachEvent で目的のオブジェクトインスタンスに登録した場合、そのインスタンスに該当するイベントが発生すると、イベントハンドラ（イベントリスナー）が起動して、第一引数でイベントに関する情報（Event クラスのインスタンス）を受け取ることができます。

このとき、複数の要素に同じイベントハンドラを登録していたりしたら、そのイベントの発生元の要素がわからないと、イベントハンドラ側でどうしていいかわからない場合がありますよね。

そのときに、イベント発生元の要素を教えてくれるのが、event.target プロパティです。

ところが。

こいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。

まず、対応ブラウザについて。

event.target プロパティに対応しているのは、Firefox、Opera、Safari、Google Chrome といったところです。

Internet Explorer は対応してないんですね（代わりに、event.srcElement プロパティを使います）。

また、注意点として、window の動的イベントに対する挙動が挙げられます。

例えば、window の onload イベントでイベントハンドラを起動させ、そのイベントハンドラが受け取った引数の event.target プロパティを見てみると、ブラウザごとに以下のようになっています。

◆window イベントに対する event.target プロパティの中身

ブラウザ	targetプロパティ
Internet Explorer 8	undefined
Firefox 3.6.13	HTMLDocument
Opera 9.64	HTMLDocument
Safari 5.0.3	HTMLDocument
Google Chrome 8.0.552.215	HTMLDocument

う～ん、Internet Explorer が undefined なのは（未対応だから）わかるとしても、window のイベントなのに、イベント発生元要素として HTMLDocument が返ってくるのは、window が DOM じゃないからですかねえ･･････。

というわけで、window で動かしたいイベントハンドラは、いくつか制約が出てきます。

window がひとつであることがわかっており、かつ window 用のイベントハンドラが他と切り分けられる場合、event.target プロパティを無視し、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>target</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.target;
        }

        // ウィンドウロードでボタンクリックイベントを追加
        window.addEvent('load',
            function (evt) {
                var elm = document.getElementById('Button1');
                elm.addEvent('click', onButtonClick, false);
                document.getElementById('Text2').value = evt.target;
            },
            true
        );

        //]]
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" /><br/>
    <input id="Text1" type="text" /><span>target</span><br />
    <input id="Text2" type="text" /><span>target(window)</span><br />
</body>
</html>