Javascript 動的バインディングの単純な実装コード events_javascript スキル

以下はページの DOM 構造です

コードをコピー コードは次のとおりです:

1

3

;li>Four li> 以下のように:


//ID に基づいてオブジェクトを取得します
function id(v) { return document.getElementById(v) }

//タグに基づいてオブジェクトを取得します
function tag(element, t) { return element.getElementsByTagName(t) }

window.onload = function() { / /テスト中のすべての li オブジェクトを取得しますvar li = tag (id("test"), "li")//ループを使用してマウス クリック イベントをバインドしますfor(var i=0; ili[i].onclick = function() {

// 1,2,3,4 が表示されると予想されます
//は常に 5
alert(""(i 1) "項目" をクリックしました);
}
}
}


上記の現象はなぜ発生しますか?理由は「forにバインドされているイベントがすぐに実行されない」からです。変更されたコードは次のとおりです:




コードをコピー


コードは次のとおりです:


// ID に基づいてオブジェクトを取得します
function id(v) { return document.getElementById(v) }

//タグに従ってオブジェクトを取得します
function tag(element, t) { return element.getElementsByTagName(t); }

window.onload = function() { //テスト中のすべての li オブジェクトを取得しますvar li = tag(id("test"), " li"); //ループを使用してマウス クリック イベントをバインドします for(var i=0; i(function() {

var t = i
li [i].onclick = function() {
alert("t " 番目の "項目をクリックしました");
}
})();
}
}


コードをテストします。通常はループ変数 i を onclick イベントに対応するハンドラー関数に渡します。