hijouguchiの日記

Event処理関係#02

javascript | 17:39 |

　まだまだEvent処理で困ったりしてますよ。

　今回は前回の続きでIEでも動作するようにしようってことで。

Event処理関係 - hijouguchiの日記

まず書いてみたのがこんな感じ。

function addEvent(doc, event, func) {
	if (window.addEventListener) {
		doc.addEventListener(event, func, false);
	} else if (window.attachEvent) {
		doc.attachEvent("on" + event, func);
	}
}

　たぶんこれで75%くらい？は動作するのですがとりあえず一つほど問題がありまして、IEではthisが使えないって事です。

IEの方で動attachEventではthisでなくevent.srcElementって物を使わないといけないようです。

IE の attachEvent では this が使えない？ - ボッチが何か言ってる

つまりは上の用にeventを関数にして登録するのが出来ない？かもしれないですね。さて、どうしましょう。つづく？

以下追記:いろいろ試行錯誤した結果上手いこといったようなのでメモ代わりに置いておきます。サイ本がいかに偉大なのかが分かってきました。

　以下このようなHTMLを仮定しておきましょう。

<div id="test1">test1</div>
<div id="test2">test2</div>

その１

// element: オブジェクト
// type: イベント click, loadとか
// listener: 登録する関数
function addEvent1(element, type, listener)
{
	if (element.addEventListener) {
		element.addEventListener(type, function(event){
			listener(this);
		}, false);
	} else if (element.attachEvent) {
		element.attachEvent('on' + type, function(event){
			listener(event.srcElement);
		});
	}
}

//登録とか
addEvent1($("test1"), "click", function(elm) {
	alert(elm.innerHTML);
});

こんな感じ。これでとりあえずはthisだとかevent.srcElementを意識せずに使えるようになりましたが、問題なのは登録するときいちいち匿名関数に引数を入れないといけないこと。せっかくならどちらかひとつで使えれば良いのですけどね。

その２

function addEvent2(element, type, listener)
{

	if (element.addEventListener) {
		element.addEventListener(type, function(event){
			listener.call(this);
		}, false);
	} else if (element.attachEvent) {
		element.attachEvent('on' + type, function(event){
			listener.call(event.srcElement);
		});
	}
}

//登録
addEvent2($("test2"), "click", function() {
	alert(this.innerHTML);
});

これでthisを使って全てを？意識せずに書けるようになりました。call()がこんなに便利な物だとは知らなかったです。

　どっちが使いやすいかってもちろんその２の方ですね。

　

　ということで追記おわり。それでは。