JavaScriptで、リスト項目のクリックイベントに、引数付きイベントハンドラを動的にバインドするサンプル。
リスト項目に対し、動的にクリックイベントを割り当てることができると何かと便利だ。
構文
window.onload = function () {
var $listAItems = document.getElementById( "リスト要素のＩＤ" ).children;
for( var $i = 0; $i < $listAItems.length; $i++ ){
$listAItems[$i].onclick =
function(){
関数名( 実引数１, 実引数２… );
};
}
}
var $listAItems = document.getElementById( "リスト要素のＩＤ" ).children;
for( var $i = 0; $i < $listAItems.length; $i++ ){
$listAItems[$i].onclick =
function(){
関数名( 実引数１, 実引数２… );
};
}
}
バインド例
window.onload = function () {
var $listAItems = document.getElementById( "sampleList" ).children;
for( var $i = 0; $i < $listAItems.length; $i++ ){
$listAItems[$i].onclick =
function(){
sampleFunction( "値１", "値２" );
};
}
}
var $listAItems = document.getElementById( "sampleList" ).children;
for( var $i = 0; $i < $listAItems.length; $i++ ){
$listAItems[$i].onclick =
function(){
sampleFunction( "値１", "値２" );
};
}
}
idが「sampleList」であるリスト要素の各項目をクリックすると、関数「sampleFunction」を呼び出す。その際、「値１」「値２」を関数「sampleFunction」に渡す。
実装例（サンプル）
色リスト
- red
- green
- blue
- white
- black
実装例の動作について
色リストの各項目をクリックすると、右側のボックスの背景色を、各項目内のカラーネームの色に変更する。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $getListAItems = document.getElementById( "sampleListA" ).children;
for( var $i = 0; $i < $getListAItems.length; $i++ ){
$getListAItems[$i].onclick =
function(){
sample( this.innerHTML );
};
}
}
function sample( $colorName ) {
var $sampleListB = document.getElementById( "sampleBoxB" );
$sampleListB.style.backgroundColor = $colorName;
}
</script>
window.onload = function () {
var $getListAItems = document.getElementById( "sampleListA" ).children;
for( var $i = 0; $i < $getListAItems.length; $i++ ){
$getListAItems[$i].onclick =
function(){
sample( this.innerHTML );
};
}
}
function sample( $colorName ) {
var $sampleListB = document.getElementById( "sampleBoxB" );
$sampleListB.style.backgroundColor = $colorName;
}
</script>
HTML
<div id="sample">
<div>
<p>色リスト</p>
<ol id="sampleListA">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>black</li>
</ol>
</div>
<div>
<div id="sampleBoxB">
</div>
</div>
</div>
<div style="clear: left;"></div>
<div>
<p>色リスト</p>
<ol id="sampleListA">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>white</li>
<li>black</li>
</ol>
</div>
<div>
<div id="sampleBoxB">
</div>
</div>
</div>
<div style="clear: left;"></div>
CSS
<style>
#sample div {
float: left;
width: 200px;
}
#sampleListA li {
width: 70px;
cursor: pointer;
}
#sampleBoxB {
height: 150px;
border: 1px solid gray;
border-radius: 10px;
}
</style>
#sample div {
float: left;
width: 200px;
}
#sampleListA li {
width: 70px;
cursor: pointer;
}
#sampleBoxB {
height: 150px;
border: 1px solid gray;
border-radius: 10px;
}
</style>