JavaScriptで、id指定した要素のクリックイベントに、引数付きイベントハンドラを動的にバインドする方法。
動的にクリックイベントを割り当てることができると何かと便利だ。
引数を渡さない場合は、クリックイベントにイベントハンドラをバインドのコードが便利。
構文
window.onload = function () {
document.getElementById( "ＩＤ" ).onclick =
function(){
関数名( 実引数１, 実引数２… );
};
}
document.getElementById( "ＩＤ" ).onclick =
function(){
関数名( 実引数１, 実引数２… );
};
}
バインド例
window.onload = function () {
document.getElementById( "sample" ).onclick =
function(){
sampleFunction( "値１", "値２" );
};
}
document.getElementById( "sample" ).onclick =
function(){
sampleFunction( "値１", "値２" );
};
}
idが「sample」である要素をクリックすると、関数「sampleFunction」を呼び出す。その際、「値１」「値２」を関数「sampleFunction」に渡す。
実装例（サンプル）
実装例の動作について
「サンプルボタン」ボタンをクリックすると、ボタンの横に「サンプル1」と表示する。
「サンプルボタン」ボタンをクリックする度に、ボタンの横に「サンプル2、サンプル3、サンプル4…」と順番に表示する。
ソースコード
JavaScript
<script type="text/javascript">
var $count = 1;
window.onload = function () {
document.getElementById( "sampleButton" ).onclick =
function(){
sample( "サンプル", $count++ );
};
}
function sample( $text, $c ) {
var $sampleOutput = document.getElementById( "sampleOutput" );
$sampleOutput.innerHTML = $text + $c;
}
</script>
var $count = 1;
window.onload = function () {
document.getElementById( "sampleButton" ).onclick =
function(){
sample( "サンプル", $count++ );
};
}
function sample( $text, $c ) {
var $sampleOutput = document.getElementById( "sampleOutput" );
$sampleOutput.innerHTML = $text + $c;
}
</script>
HTML
<button id="sampleButton">サンプルボタン</button> <span id="sampleOutput"></span>