JavaScriptで、id指定した要素内のマウスムーブイベントに、イベントハンドラをバインドする方法。
この方法を使うと、マウスムーブイベントによる関数呼び出しを、JavaScript側で一元管理できる。
HTML要素のonmousemove属性から直接呼び出すより、HTMLコードもシンプルになる。
構文
window.onload = function () {
document.getElementById( "ID" ).onmousemove = 関数名;
}
document.getElementById( "ID" ).onmousemove = 関数名;
}
バインド例
window.onload = function () {
document.getElementById( "sample" ).onmousemove = sampleFunction;
}
document.getElementById( "sample" ).onmousemove = sampleFunction;
}
idが「sample」である要素内でマウスカーソルを動かすと、関数「sampleFunction」を呼び出す。
実装例(サンプル)
1
実装例の動作について
赤い背景のボックス内でマウスカーソルを動かすと、赤い背景のボックス内の数値に1を足す。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = initialize;
function initialize() {
document.getElementById( "sample" ).onmousemove = funcAdd1;
}
function funcAdd1() {
document.getElementById( "sample" ).innerHTML =
parseInt( document.getElementById( "sample" ).firstChild.nodeValue ) + 1;
}
</script>
window.onload = initialize;
function initialize() {
document.getElementById( "sample" ).onmousemove = funcAdd1;
}
function funcAdd1() {
document.getElementById( "sample" ).innerHTML =
parseInt( document.getElementById( "sample" ).firstChild.nodeValue ) + 1;
}
</script>
HTML
<div id="sample">1</div>
CSS
<style type="text/css">
#sample {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: red;
color: white;
text-align: center;
border-radius: 10px;
}
</style>
#sample {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: red;
color: white;
text-align: center;
border-radius: 10px;
}
</style>