JavaScriptの動かないコード　(中級編)　動的追加したイベントの実行順序 ( addEventListener vs attachEvent )

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：

ボタンへ動的にイベントリスナを追加する。
ボタン押下時に，0, 1, 2 とアラート表示する。

<input type="button" value="「0, 1, 2」と表示" id="my_button">

<script language="JavaScript">

function f0(){ alert( 0 ); }
function f1(){ alert( 1 ); }
function f2(){ alert( 2 ); }

// イベントハンドラ設定
function addEvent( element, eventName, func ){  
	if ( element.addEventListener )
	{
		// Firefox用
		element.addEventListener( eventName, func, false );
	}
	else if ( element.attachEvent )
	{
		// IE用
		element.attachEvent( "on" + eventName, func );  
	}
}

// リスナーを追加
addEvent( my_button, "click", f0 );
addEvent( my_button, "click", f1 );
addEvent( my_button, "click", f2 );

</script>

答え

FFでは「0, 1, 2」と表示されるが，
IEでは「1, 2, 0」と表示される。

IEのイベント実行順序がおかしい。

イベントリスナの追加については，次のような説明がなされる事がある。

Internet Explorer では，後から追加したイベントリスナーが先に実行されます。

一方，その他のWebブラウザでは，先に追加したイベントリスナーから順に実行され，Internet Explorer とは順序が逆になります。

…（「JavaScript 中級講座 Ajaxを学ぶ前の基礎知識」，技術評論社より抜粋）

この１文目は誤りである。（本は良書なのだけど）

確かにFirefoxでは，リスナーは追加順に実行される。

でもIEでは，冒頭のコードで見たように，必ずしも逆順に実行されるとは限らない。
ただし追加した関数が２つの場合は，最後に追加したものが最初に実行されるので，逆順に実行されたように見える。

追加順でもないし，追加の逆順でもないという事は，では一体どういう順序で実行されるのだろうか？

IEでのイベントリスナー実行順序を検証する

リスナが１個〜10個の場合のそれぞれについて，実行順序を確かめてみよう。

そのテストを実行するコードを下記に掲載した。

<input type="button" value="テストを実行" onClick="exec()">
<input type="button" value="イベントリスナ追加用のボタン" id="my_button">

<br>

<div id="log"></div>


<script language="JavaScript">

// リスナ追加
function addEvent( element, eventName, func )
{
	if ( element.addEventListener ){ element.addEventListener( eventName, func, false ); }
	else if ( element.attachEvent ){ element.attachEvent( "on" + eventName, func );      }
}

// リスナ削除
function removeEvent( element, eventName, func )
{
	if ( element.removeEventListener ){ element.removeEventListener( eventName, func, false ); }
	else if ( element.detachEvent )   { element.detachEvent( "on" + eventName, func );         }
}


// テストを実行
function exec()
{
	// 追加する最大数（ここでは10個のリスナ）
	var max = 10;

	// 関数を max 個作成
	for( var i = 1; i <= max; i ++ )
	{
		// 関数をグローバル変数で(var無しで)宣言する
		var str = "f"
			+ i 
			+ " = function (){ log.innerHTML += '" 
			+ i 
			+ " ';}"
			;
		eval( str );
	}
	
	// テスト実行
	for( var i = 1; i <= max; i ++ )
	{
		execCase( i );
	}
}

// リスナを num 個追加した場合の実行順序を調べる
function execCase( num )
{
	// リスナを num 個追加
	for( var j = 1; j <= num; j ++ )
	{
		addEvent( my_button, "click", eval( "f" + j ) );
	}

	// イベントを発生させる
	my_button.click();

	// リスナを num 個削除
	for( var j = 1; j <= num; j ++ )
	{
		removeEvent( my_button, "click", eval( "f" + j ) );
	}
	log.innerHTML += "<br>";
}


</script>

「テストを実行」というボタンを押すと，テストが始まる。

実行結果は，手元の環境では下記のようになった。

Firefox 3.0.3：

1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
1 2 3 4 5 6
1 2 3 4 5 6 7
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9 10

これは予想通りの実行順序で，理想の挙動。

それに対し，IE 7：

1
2 1
2 3 1
2 3 4 1
5 2 3 4 1
6 5 2 3 4 1
6 7 5 2 3 4 1
6 8 7 5 2 3 4 1
6 8 9 7 5 2 3 4 1
6 8 10 9 7 5 2 3 4 1

これはひどい・・・全く傾向がつかめない。

しかも，他のお方が試した場合には，さらに実行順序が変わる。

IEのイベント実行順序は不定？

http://d.hatena.ne.jp/inamenai/200809...

イベントが3件以上登録されていると、逆順でもないようです（10件登録して実行すると、3→2→4→6→8→10→9→7→5→1 になる）。
何度リロードしても同じ順番なので何らかの法則性はあるみたいですが、どういう規則なのかよくわかりません…。
ちなみに、 prototype.jsを使わずに直接attachEvent()を書いた場合は、2→3→5→7→9→10→8→6→4→1 とまた違う順番になってますます意味不明。

対策

「イベントリスナの定義が一つの関数内に収まる」のならば，追加は１つで済むので，面倒な事が起こらず一番よいだろう。

また複数の定義が必要な場合であっても，「イベントリスナ間で実行順序に依存性を持たせない」という方針が可能かもしれない。

あるリスナ関数は画面上のある部分を操作し，別のリスナ関数は画面上の他の部分を操作し，・・・といった具合に，処理を分散させるのだ。

では，冒頭のコードのように，複数のイベントリスナーの実行順序が重要になる場合はどうか？

もし，ある関数の実行前に，外部ライブラリの読み込み済み判定が必要なのであれば，amachangによる下記のエントリが参考になるかもしれない。

動的ローディング雑感
http://d.hatena.ne.jp/amachang/200808...

これは個別のscriptタグにコールバック関数を設ける方法。

あるいは，IEでどうしてもイベントリスナの実行順序を保証したい，という場合は，スレッドみたいな事をするという手がある。

この具体的なコード例は，連載外で別途，次記事に書く事にする。

連載目次へ