ブログデザイン備忘録 ~イベントハンドラ3

1. onMouseOver/onMoouseOut
2. onMouseUp/onMouseDown
3. onMouseMove
4. まとめ

　今回もJavascriptのイベントハンドラに関してonMouseOver/onMouseOut, onMouseDown/onMouseUp, omMouseMoveの効果について紹介する。今回で一通り紹介し終えたことになる。javascritptのイベントハンドラの紹介や、実装した効果についてページ内に示しているが、ブラウザによって適用できないものがある。(Windows10 chromeでは検証している）

1. onMouseOver/onMoouseOut

　要素にマウスが乗ったときに発生するイベントがonMouseOverで乗っていたマウスが離れるときに発生するのはonMouseOverというイベントになる。onMouseOverとonMouseOutを組み合わせることでCSSの疑似要素hoverと同じ働きをさせることができるが、ホバー後にスタイルを戻すためにはonMouseOutの設定も必要になるのでコードが冗長になる。

以前記事内で取り上げたが、ボタンの適用例は以下のようになる。

<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmouseover="this.style.background='black';this.style.color='white'"onmouseout="this.style.background='';this.style.color='black'">ボタン</a></div>

ボタン

ボタン以外にも適用することができる。例えば<p>タグに適用すると、行を選択したかのような効果が得られる。

<div><p style="color:black;background: white;"onmouseover="this.style.background='black';this.style.color='white'"onmouseout="this.style.background='';this.style.color='black'">行1を選択</p></div>
<div><p style="color:black;background: white;"onmouseover="this.style.background='black';this.style.color='white'"onmouseout="this.style.background='';this.style.color='black'">行2を選択</p></div>

行1を選択

行2を選択

リストに適用するとSelect画面のような感じになる。

<ul>
   <li style="color:black;background: white;"onmouseover="this.style.background='lightgreen'"onmouseout="this.style.background=''">List1</li>
   <li style="color:black;background: white;"onmouseover="this.style.background='cyan'"onmouseout="this.style.background=''">List2</li>
   <li style="color:black;background: white;"onmouseover="this.style.background='pink'"onmouseout="this.style.background=''">List3</li>
</ul>

List1
List2
List3

2. onMouseUp/onMouseDown

　マウスボタンが押された場合に発生するイベントがonMouseDownで、押したマウスボタンが上がった場合はonMouseUpが発生する。クリック動作を分解したようなイベントになるが、onClickとの違いは右クリックやホイールボタンなどマウスのボタンが押されれば常に発生する点にある。

これも以前記事内で取り上げたが、ボタンの適用例は以下のようになる。クリック動作の長さに依存して反転時間が変わることや右クリックでも動作することが確認できる。

<div><a   style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmousedown="this.style.background='black';this.style.color='white'"onmouseup="this.style.background='white';this.style.color='black'">ボタン</a></div>

ボタン

さらにonMouseOverやonMouseOutと組み合わせてもよい。下の例はマウスオーバーでボタンの色がシアン、クリック、ボタン押下時は反転（ボタン色：黒,文字:白）、ボタンを戻してマウスオーバーの状態だとピンク、マウスがはずれるともとの白地のボタンに戻る

<div><a   style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmouseover="this.style.background='cyan'"onmouseout="this.style.background=''"onmousedown="this.style.background='black';this.style.color='white'"onmouseup="this.style.background='pink';this.style.color='black'">ボタン</a></div>

ボタン

3. onMouseMove

onMouseMoveはマウスが動いている時に発生するイベント。マウスポインタの座標値を使って何かする場合に使用する。事例としてマウスポインタの座標を取得するコードを下に示す。（コードは onmousemoveイベント - JavaScript（ジャバスクリプト）リファレンスを少し変更して使用している）枠内でマウスを動かすと座標値を常に更新して表示し、枠からはずれる場合はonMouseOutイベントを使って座標値をクリアするようにしている。

<script type="text/javascript">
function sample1getCoordinates( $event ) {
 document.getElementById( "sample1outputX" ).innerHTML = "Ｘ座標：" + $event.clientX;
 document.getElementById( "sample1outputY" ).innerHTML = "Ｙ座標：" + $event.clientY;
}
function sample1clearCoordinates() {
 document.getElementById( "sample1outputX" ).innerHTML = "Ｘ座標：";
 document.getElementById( "sample1outputY" ).innerHTML = "Ｙ座標：";
}
</script>

<div id="sample1box"style="height: 200px; width: 300px;border: 1px solid gray;border-radius: 10px;background-color: yellow;"onmousemove="sample1getCoordinates(event);" onmouseout="sample1clearCoordinates();"></div>
<p id="sample1outputX">Ｘ座標：</p>
<p id="sample1outputY">Ｙ座標：</p>

Ｘ座標：

Ｙ座標：

ボタンに適用する場合は、onMouseOverと同じ効果が得られる。例えば、上のonmouseoverをボタンに適用した例のイベントハンドラonmouseoverのところをonmousemoveにしても同じ動作となる。

<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmousemove="this.style.background='black';this.style.color='white'"onmouseout="this.style.background='';this.style.color='black'">ボタン</a></div>