マウスムーブイベントにイベントハンドラをバインド

JavaScriptで、id指定した要素内のマウスムーブイベントに、イベントハンドラをバインドする方法。

この方法を使うと、マウスムーブイベントによる関数呼び出しを、JavaScript側で一元管理できる。

HTML要素のonmousemove属性から直接呼び出すより、HTMLコードもシンプルになる。

構文

window.onload = function () {
    document.getElementById( "ID" ).onmousemove = 関数名;
}

バインド例

window.onload = function () {
    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>

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>

スポンサード リンク

カテゴリー: JavaScript, イベント, 逆引き パーマリンク