onmousedown属性, onmousemove属性, onmouseup属性の3つのイベント属性（イベントハンドラ）によりポインティングデバイス（pointing device）の全ての動作に対して起動するイベントを指定することができます。onmousedown属性はマウスやノートパソコン等に付属しているトラックパッドなどのポインティングデバイスの左右を問わずボタンが押されたときに起動するスクリプトを指定します。onmousemove属性はポインティングデバイスのカーソル（ポインタ）が移動したときに起動するスクリプトを指定します。onmouseup属性はポインティングデバイスの左右を問わずボタンが押されて放されたときに起動するスクリプトを指定します。
※onmousedown属性, onmousemove属性, onmouseup属性はポインティングデバイスがない環境では、まったく操作できなないので注意してください。
onmousedown属性, onmousemove属性, onmouseup属性と似たような動作でイベントを発生させる属性が他にもいくつかありますが、この3つの属性は組み合わせて、オブジェクトを動かすなどのマウスドラッグ処理によく使われます。マウスドラッグ処理とは、たとえば、このような使い方がよく見掛けられます。
onmousemove属性のように当該要素の上でのカーソル（ポインタ）の動作によりイベントを発生させる属性に、onmouseover属性, onmouseout属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、イベントは onmouseover→onmousemove→onmouseout の順に発生します。onmouseover属性と onmousemove属性のイベントが発生する動作は異なり、onmouseover属性は当該要素内にカーソルが入ったときに一度だけ発生し、その後要素内で動かしているだけではイベントは起こらず、要素内にカーソルを出入りさせると再びイベントが発生します。これに対して、onmousemove属性は要素内でカーソルを少しでも動かすと、その度にイベントが発生します。
また、onmousedown属性, onmouseup属性はポインティングデバイスの左右ボタンの動作を問いませんが、左ボタンに限定された動作によりイベントを発生させる属性に、onclick属性と ondblclick属性があります。これらの属性をひとつの同じ要素に併せて指定している場合、左ボタンを2回連続で押す動作を行うと、Netscape, Firefox, Opera, Safari では onmousedown→onmouseup→onclick→onmousedown→onmouseup→ondblclick の順にイベントが発生します。Internet Explorer のみイベント発生順序が異なり、onmousedown→onmouseup→onclick→onmousedown→ondblclick→onmouseup の不規則な順でイベントが発生します。どの UA においても2回連続でボタンを押した時の2回目の onclick属性のイベントは無効になるようです。
次のスクリプトでは｢Start&Stop｣の部分をポインティングデバイスの左右いずれかのボタンで押下している間だけ、onmousedown属性のイベントによるストップウォッチが作動します。そして、押されていたボタンが放されると、onmouseup属性のイベントが発生し、ストップウォッチのタイマーが止まります。
<script type="text/javascript">
var stime, ntime;
var min, sec, cen, xmin, xsec, xcen;
var fStart, active, interval , fStop;
xmin=0; xsec=0; xcen=0; fStop=1;
function timerstart(){
if (fStop==1) {
fStart=new Date();
stime=fStart.getTime()-(xmin*60000+xsec*1000+xcen*10);
count();
fStop=0;
}
}
function count() {
interval=setTimeout("count()",10);
active=new Date();
ntime=active.getTime();
min=Math.floor((ntime-stime)/60000);
sec=Math.floor(((ntime-stime)%60000)/1000);
cen=Math.floor((((ntime-stime)%60000)%1000)/10);
document.timer.m.value=min;
document.timer.s.value=sec;
document.timer.c.value=cen;
}
function timerstop(x) {
clearTimeout(interval);
xmin=eval(x.m.value);
xsec=eval(x.s.value);
xcen=eval(x.c.value);
fStop=1;
}
function timerclear() {
clearTimeout(interval);
xmin=0; xsec=0; xcen=0;
document.timer.m.value="0";
document.timer.s.value="0";
document.timer.c.value="0";
fStop=1;
}
window.onload=timerclear;
</script>
.....
<form name="timer">
<p><input type="button" value="Start&Stop"
onmousedown="timerstart()" onmouseup="timerstop(this.form)">
</p><p>
<input size="2" name="m" value="0">分
<input size="2" name="s" value="0">秒
<input size="2" name="c" value="0">
</p>
</form>