onmousedownイベント（マウスダウンイベント）とは、マウスの何れかのボタンを押した時のイベント。
構文
HTML
<element onmousedown="イベントハンドラ">
例
ボタン要素
<button onmousedown="イベントハンドラ">ボタン</button>
LI要素
<li onmousedown="イベントハンドラ">リスト項目</li>
JavaScript
object.onmousedown = function(){ イベントハンドラ };
サンプル１
HTMLドキュメント上でイベントハンドラを登録するサンプル。
0
サンプル１の動作について
- 「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に１を加算する。
- 「カウントアップ」ボタンを押している間だけ、ボタンの右横の数値の色が赤色になる。ボタンを放すと元の色に戻る。
サンプル１のソースコード
JavaScript
<script type="text/javascript">
var $countA = 0;
function countUpA() {
var $elementReference = document.getElementById( "sampleOutputA" );
$elementReference.innerHTML = ++$countA;
}
function chageColorA( $color ) {
var $elementReference = document.getElementById( "sampleOutputA" );
$elementReference.style.color = $color;
}
</script>
var $countA = 0;
function countUpA() {
var $elementReference = document.getElementById( "sampleOutputA" );
$elementReference.innerHTML = ++$countA;
}
function chageColorA( $color ) {
var $elementReference = document.getElementById( "sampleOutputA" );
$elementReference.style.color = $color;
}
</script>
HTML
<p>
<button onmousedown="countUpA();chageColorA('#FF0000');" onmouseup="chageColorA('#333333');">カウントアップ</button>
<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>
<button onmousedown="countUpA();chageColorA('#FF0000');" onmouseup="chageColorA('#333333');">カウントアップ</button>
<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>
サンプル２
JavaScript上で動的にイベントハンドラを登録するサンプル。
0
サンプル２の動作について
- 「カウントアップ」ボタンをクリックする度に、ボタンの右横の数値に１を加算する。
- 「カウントアップ」ボタンを押している間だけ、ボタンの右横の数値の色が赤色になる。ボタンを放すと元の色に戻る。
サンプル２のソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleButtonB" ).onmousedown = function(){
countUpB();
chageColorB('#FF0000');
};
document.getElementById( "sampleButtonB" ).onmouseup = function(){
chageColorB('#333333');
};
}
var $count = 0;
function countUpB() {
document.getElementById( "sampleOutputB" ).innerHTML = ++$count;
}
function chageColorB( $color ) {
document.getElementById( "sampleOutputB" ).style.color = $color;
}
</script>
window.onload = function () {
document.getElementById( "sampleButtonB" ).onmousedown = function(){
countUpB();
chageColorB('#FF0000');
};
document.getElementById( "sampleButtonB" ).onmouseup = function(){
chageColorB('#333333');
};
}
var $count = 0;
function countUpB() {
document.getElementById( "sampleOutputB" ).innerHTML = ++$count;
}
function chageColorB( $color ) {
document.getElementById( "sampleOutputB" ).style.color = $color;
}
</script>
HTML
<p>
<button id="sampleButtonB">カウントアップ</button>
<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>
<button id="sampleButtonB">カウントアップ</button>
<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>