JavaScriptで、id指定した要素のマウスオーバーイベントとマウスアウトイベントに、イベントハンドラをバインドする方法。
この方法を使うと、マウスオーバーとマウスアウトによる関数呼び出しを、JavaScript側で一元管理できる。
HTML要素のonmouseover属性やonmouseout属性から直接呼び出すより、HTMLコードもシンプルになる。
構文
window.onload = function () {
document.getElementById( "ＩＤ" ).onmouseover = 関数名; // マウスオーバー
document.getElementById( "ＩＤ" ).onmouseout = 関数名; // マウスアウト
}
document.getElementById( "ＩＤ" ).onmouseover = 関数名; // マウスオーバー
document.getElementById( "ＩＤ" ).onmouseout = 関数名; // マウスアウト
}
バインド例
window.onload = function () {
document.getElementById( "sample" ).onmouseover = sampleFunctionA;
document.getElementById( "sample" ).onmouseout = sampleFunctionB;
}
document.getElementById( "sample" ).onmouseover = sampleFunctionA;
document.getElementById( "sample" ).onmouseout = sampleFunctionB;
}
idが「sample」である要素の上にカーソルを合わせると、関数「sampleFunctionA」を呼び出す。
idが「sample」である要素の上からカーソルを外すと、関数「sampleFunctionB」を呼び出す。
実装例（サンプル）
サンプル
赤
青
緑
実装例の動作について
- 「赤」の上にカーソルを合わせると、「サンプル」の背景を赤色にする。「赤」の上からカーソルを外すと、「サンプル」の背景を灰色にする。
- 「青」の上にカーソルを合わせると、「サンプル」の背景を青色にする。「青」の上からカーソルを外すと、「サンプル」の背景を灰色にする。
- 「緑」の上にカーソルを合わせると、「サンプル」の背景を緑色にする。「緑」の上からカーソルを外すと、「サンプル」の背景を灰色にする。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = initialize;
function initialize() {
document.getElementById( "colorSelectorRed" ).onmouseover = changeRed;
document.getElementById( "colorSelectorBlue" ).onmouseover = changeBlue;
document.getElementById( "colorSelectorGreen" ).onmouseover = changeGreen;
document.getElementById( "colorSelectorRed" ).onmouseout = changeGray;
document.getElementById( "colorSelectorBlue" ).onmouseout = changeGray;
document.getElementById( "colorSelectorGreen" ).onmouseout = changeGray;
}
function changeGray() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "gray";
}
function changeRed() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "red";
}
function changeBlue() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "blue";
}
function changeGreen() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "green";
}
</script>
window.onload = initialize;
function initialize() {
document.getElementById( "colorSelectorRed" ).onmouseover = changeRed;
document.getElementById( "colorSelectorBlue" ).onmouseover = changeBlue;
document.getElementById( "colorSelectorGreen" ).onmouseover = changeGreen;
document.getElementById( "colorSelectorRed" ).onmouseout = changeGray;
document.getElementById( "colorSelectorBlue" ).onmouseout = changeGray;
document.getElementById( "colorSelectorGreen" ).onmouseout = changeGray;
}
function changeGray() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "gray";
}
function changeRed() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "red";
}
function changeBlue() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "blue";
}
function changeGreen() {
document.getElementById( "changeBackgroundColor" ).style.backgroundColor = "green";
}
</script>
HTML
<div id="changeBackgroundColor">サンプル</div>
<div id="colorSelector">
<span id="colorSelectorRed"> 赤 </span>
<span id="colorSelectorBlue"> 青 </span>
<span id="colorSelectorGreen"> 緑 </span>
</div>
<div id="colorSelector">
<span id="colorSelectorRed"> 赤 </span>
<span id="colorSelectorBlue"> 青 </span>
<span id="colorSelectorGreen"> 緑 </span>
</div>
CSS
<style type="text/css">
#changeBackgroundColor {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: gray;
color: white;
text-align: center;
border-radius: 10px;
}
#colorSelector {
width: 360px;
margin-top: 5px;
text-align: center;
font-size: 16px;
}
#colorSelectorRed {
background-color: red;
color: white;
}
#colorSelectorBlue {
background-color: blue;
color: white;
}
#colorSelectorGreen {
background-color: green;
color: white;
}
</style>
#changeBackgroundColor {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: gray;
color: white;
text-align: center;
border-radius: 10px;
}
#colorSelector {
width: 360px;
margin-top: 5px;
text-align: center;
font-size: 16px;
}
#colorSelectorRed {
background-color: red;
color: white;
}
#colorSelectorBlue {
background-color: blue;
color: white;
}
#colorSelectorGreen {
background-color: green;
color: white;
}
</style>