onmousewheelイベント

onmousewheelイベント(マウスホイールイベント)とは、マウスホイールを動かした時のイベント。

構文

HTML

<element onmousewheel="イベントハンドラ">

div要素
<div onmousewheel="イベントハンドラ">div要素</div>
body要素
<body onmousewheel="イベントハンドラ">body要素</body>

JavaScript

object.onmousewheel = function(){ イベントハンドラ };

サンプル1

HTMLドキュメント上でイベントハンドラを登録するサンプル。

0

サンプル1の動作について

  • 赤い背景色のdiv要素の上でマウスホイールを動かす度に、div要素内の数値に1を加算する。
  • Chrome、IE11にて動作確認。2014/2/18現在、Firefoxでは動作せず。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function sampleACountUp() {
    var $sampleA = document.getElementById( "sampleA" );
    $sampleACount = $sampleA.innerHTML;
    $sampleA.innerHTML = ++$sampleACount;
}
</script>

HTML

<div id="sampleA" onmousewheel="sampleACountUp();">0</div>

CSS

<style>
#sampleA {
    width: 300px;
    padding: 250px 0;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: red;
    color: white;
    font-size: 50px;
    text-align: center;
}
</style>

サンプル2

JavaScript上で動的にイベントハンドラを登録するサンプル。

0

サンプル2の動作について

  • 赤い背景色のdiv要素の上でマウスホイールを動かす度に、div要素内の数値に1を加算する。
  • Chrome、IE11にて動作確認。2014/2/18現在、Firefoxでは動作せず。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    var $sampleB = document.getElementById( "sampleB" );
    $sampleB.onmousewheel = function(){
        sampleBCountUp();
    };
}
function sampleBCountUp() {
    var $sampleB = document.getElementById( "sampleB" );
    $sampleBCount = $sampleB.innerHTML;
    $sampleB.innerHTML = ++$sampleBCount;
}
</script>

HTML

<div id="sampleB">0</div>

CSS

<style>
#sampleB {
    width: 300px;
    padding: 250px 0;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: red;
    color: white;
    font-size: 50px;
    text-align: center;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, マウスイベント, リファレンス パーマリンク