click ( onclick ) イベント
MouseEvent
click ( onclick ) イベントは、マウスなどのポインティングデバイスでタグエレメントがクリックされたら発生する MouseEvent インターフェイスのイベントです。
document.getElementById('example').addEventListener("click", (event)=>{ console.log( 'event type : ' + event.type ); });
click がイベントタイプ、onclick がイベントハンドラーです。イベントハンドラーによって、そのイベントの発生を監視することを設定します。
イベントタイプはイベントのタイプ名を示します。イベントハンドラーによって実行された関数内から event.type で取得することができます。
関連するマウスイベントには以下があります。
MouseEvent type | 概要 |
---|---|
oncontextmenu | 右クリックでコンテキストメニューを開いたら |
ondblclick | ダブルクリックしたら |
onmousedown | マウスボタンが押されたら |
onmouseenter | マウスポインターが設定されたエレメント上にくると |
onmouseleave | マウスポインターが設定されたエレメントから離れると |
onmousemove | マウスポインターが設定されたエレメント上にある間 |
onmouseout | マウスポインターが設定されたエレメントから離れると(設定されたエレメントの子エレメントも対象) |
onmouseover | マウスポインターが設定されたエレメント上にある間(設定されたエレメントの子エレメントも対象) |
onmouseup | マウスボタンを離したら |
構文(Syntax)
in HTML
<tagelement onclick="oneFunction()">
in JavaScript
object.onclick = function(){ }; object.addEventListener("click", script_);
備考(Remarks)
Bubbles | Yes |
Cancelable | Yes |
Interface | MouseEvent |
Supported HTML Elements | ALL HTML elements |
Example
関連(Related)
HTML、CSS、DOMのマウス、キーボード、タッチデバイス、カーソルに関する用途一覧です。
HTML
CSS
DOM
- 全般
-
- インターフェイス
- UiEvent
- イベント
- which
- プロパティ
- altKey、 ctrlKey、 metaKey、 relatedTarget、 shiftKey
- メソッド
- getModifierState()
- マウス
-
- インターフェイス
- DragEvent、 MouseEvent
- イベント
- click、 contextmenu、 dblclick、 dragend、 dragenter、 dragleave、 dragover、 dragstart、 drop、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 show、 onwheel
- プロパティ
- button、 buttons、 clientX、 clientY、 code、 deltaMode、 deltaX、 deltaY、 deltaZ、 pageX、 pageY、 screenX、 screenY
- メソッド
- キーボード
- タッチデバイス
-
- インターフェイス
- TouchEvent
- イベント
- touchcancel、 touchend、 touchmove、 touchstart、 transitionend
- プロパティ
- メソッド