JavaScriptのマウスイベント

プレゼンテーションを行うには、次のマウスイベントでこのdivタグ、マウスがあるときに作動位置「私はdiv要素だ」と2箇所以降、様々なイベント業績の「私はスパンです」

<DIVクラス= "DIV1">私はdiv要素です

　　<BR>

<スパン>私はスパン</ span>にしています

</ div>

1、左クリックイベントをクリック

VAR oDiv = document.querySelector（ 'DIV' ）; 
oDiv.onclick =は関数（）{ 
    にconsole.log（「左クリックイベント」です）; 
}

2、左ダブルクリックイベントdbclick

VAR oDiv = document.querySelector（ 'DIV' ）; 
oDiv.ondbclick = 関数（）{ 
    （にconsole.log左クリックイベント」です」）; 
}

3、右クリックコンテキストメニューイベント

VAR oDiv = document.querySelector（ 'DIV' ）; 
oDiv.oncontextmenu = 関数（）{ 
    （にconsole.log右クリックイベント」です」）; 
}

4、イベントマウスダウンダウンマウス

VAR oDiv = document.querySelector（ 'DIV' ）;
 // 単にプレスのいずれか右または左キー、トリガ 
oDiv.onmousedown = 関数（）{ 
    にconsole.log（イベントダウン「マウス" ）; 
}

図5は、 ``イベントのmouseupダウンマウスを持ち上げ

VAR oDiv = document.querySelector（ 'DIV' ）;
 // だけ、トリガ解除キー右または左のいずれか 
oDiv.onmouseup = 関数（）{ 
    にconsole.log（ 'マウス脱退イベント' ）; 
}

図6に示すように、マウスイベントを移動
境界線トリガマウスオーバーのMouseEnterを通して

// 子のトリガーの経過毎
VAR oDiv = document.querySelector（ 'DIV' ）; 
oDiv.onmouseover = 機能（）{ 
    はconsole.log（ 'イベントの上にマウス' ）; 
} 
// 一度だけトリガー、親ポスト・トリガ、トリガされた後、もはや子
VAR oDiv = document.querySelector（ 'DIV' ）; 
oDiv.onmouseenter = 関数（）{ 
    にconsole.log（ 'マウスイベントを入力' ）; 
}

7、イベントアウトマウス
の境界線トリガマウスアウトのmouseleaveて

// 親の後離れて親と子からのトリガ、または他のレベルトリガ入力しない
VAR oDiv = document.querySelector（「DIV」）; 
oDiv.onmouseout = 機能（）{ 
    はconsole.logは（「アウトマウスイベント」を）; 
} 
// 親にしないトリガー、サブステージに入らないトリガー、離脱親トリガ
VAR oDiv = document.querySelector（「DIV」）; 
oDiv.onmouseleave = 関数（）{ 
    にconsole.log（「マウス脱退イベント' ）; 
}

8、のMouseMoveマウスの動きが
再びラベルの範囲内でマウスを移動するためには、ホバーのようなイベントをトリガします

// マウス親の内部には、すべてのステップは、記録の小さな動きにも影響をトリガすると
VAR oDiv = document.querySelector（「DIV」）; 
oDiv.onmousemove = 関数（）{ 
    にconsole.log（「マウス移動イベントを」）; 
}

おすすめ