イベント属性(グローバル属性)
グローバル属性にはイベント属性も含まれます。イベント属性はイベントハンドラーと呼ばれます。該当するイベントが発生すると定義された関数、関数式を実行します。
イベント属性一覧
event handler name | elements | when to run |
---|---|---|
Windowイベント | ||
onbeforeunload | <body> | ページを閉じる/移動するといったページを離れる |
onerror | <img>,<input type="image">,<object>,<link>,<script>,<audio>,<video> | 外部ファイルをロード中にエラーが起きたら |
onhashchange | <body> | 現在のURLの「#」記号で始まる部分に変更があったとき |
onload | <body>,<frame>,<frameset>,<iframe>,<img>,<input type="image">,<link>,<script>,<style> | webページがロードし終わったら |
onpageshow | <body> | onpageshow属性はwebページがキャッシュでロードされても動く |
onresize | <body> | windowがリサイズされたら |
onunload | <body> | 現在のwebページを閉じる/遷移する、formを送信、リロードしたら |
Formイベント | ||
onblur | All HTML Elements | フォーカスを失った(onfocus属性の対) |
onchange | <input type="checkbox">,<input type="file">,<input type="password">,<input type="radio">,<input type="range">,<input type="search">,<input type="text">,<select>,<textarea> | タグエレメントの値が変化したら |
oncontextmenu | All HTML Elements | マウスの右クリックでコンテキストメニューを開いたら |
onfocus | All HTML Elements | フォーカスされると(onblur属性の対) |
oninput | <input type="password">,<input type="search">,<input type="text">,<textarea> | タグエレメントの入力に変化が起きたら |
onreset | <form> | <form>がリセットされたら |
onselect | <input type="file">,<input type="password">,<input type="text">,<textarea> | タグエレメントのテキストのどこかが選択されたら |
onsubmit | <form> | <form>が送信されたら |
Keyboardイベント | ||
onkeydown | All HTML Elements | ユーザーがキーを押したら |
onkeypress | All HTML Elements | ユーザーがキーを押したら(ALT,CTRL,SHIFT,ESCキー以外) |
onkeyup | All HTML Elements | ユーザーがキーを押した状態から離したら |
Mouseイベント | ||
onclick | All HTML Elements | タグエレメント上でクリックされたら |
ondblclick | All HTML Elements | タグエレメント上でダブルクリックされたら |
onmousedown | All HTML Elements | マウスボタンがタグエレメント上で押されたら |
onmousemove | All HTML Elements | マウスポインターがタグエレメント上で移動したら |
onmouseout | All HTML Elements | マウスポインターがタグエレメント上から離れたら |
onmouseover | All HTML Elements | マウスポインターがタグエレメント上に来たら |
onmouseup | All HTML Elements | マウスボタンをタグエレメント上で離したら |
Dragイベント | ||
ondrag | All HTML Elements | タグエレメントがドラッグされたら |
ondragend | All HTML Elements | タグエレメントのドラッグが終了したら |
ondragenter | All HTML Elements | この属性を設定したタグエレメント上に、他のタグエレメントがドラッグによって来たら |
ondragleave | All HTML Elements | この属性が設定されたタグエレメント上から、他のタグエレメントがドラッグで離れたら |
ondragover | All HTML Elements | この属性が設定されたタグエレメント上に、他のタグエレメントがドラッグで来たら |
ondragstart | All HTML Elements | タグエレメントをドラッグし始めたら |
ondrop | All HTML Elements | この属性が設定されたタグエレメント上に、他のタグエレメントがドロップされたら |
onscroll | <address>,<blockquote>,<body>,<caption>,<center>,<dd>,<dir>,<div>,<dl>,<dt>,<fieldset>,<form>,<h1> to<h6>,<html>,<li>,<menu>,<object>,<ol>,<p>,<pre>,<select>,<tbody>,<textarea>,<tfoot>,<thead>,<ul> | スクロールバーが操作されたら |
Clipboardイベント | ||
oncopy | All HTML Elements | タグエレメントまたはその値がコピーされたら |
oncut | All HTML Elements | タグエレメントの値がカット(切り取り)されたら |
onpaste | All HTML Elements | タグエレメントにペイスト(貼り付け)されたら |
Mediaイベント | ||
onabort | <audio>,<video> | ダウンロードが中止されたら |
oncanplay | <audio>,<video> | 開始することができるようになったら |
oncanplaythrough | <audio>,<video> | 停止することなく再生できると推定できたら |
ondurationchange | <audio>,<video> | 期間データが変更されたときに |
onended | <audio>,<video> | 再生し終わったら |
onerror | <img>,<input type="image">,<object>,<link>,<script>,<audio>,<video> | 外部ファイルをロード中にエラーが起きたら |
onloadeddata | <audio>,<video> | 次のフレームが再生するのに十分なデータがロードされなかったら |
onloadedmetadata | <audio>,<video> | メタデータがロードされたら |
onloadstart | <audio>,<video> | ダウンロードプロセスが始まったら |
onpause | <audio>,<video> | 一時停止したら |
onplay | <audio>,<video> | 再生されたら、または一時停止から再開すると |
onplaying | <audio>,<video> | 一時停止または停止した後に再会すると |
onprogress | <audio>,<video> | ダウンロードの間に |
onratechange | <audio>,<video> | 再生速度が変更されたら |
onseeked | <audio>,<video> | ユーザが再生位置を変更するまたはスキップすると |
onseeking | <audio>,<video> | 再生位置を変更するまたはスキップすると |
onstalled | <audio>,<video> | メディアデータを取得してもそのデータが利用できないときに |
onsuspend | <audio>,<video> | メディアデータが意図的に取得できないときに |
ontimeupdate | <audio>,<video> | 再生が中段されたら |
onvolumechange | <audio>,<video> | メディアの再生音を変化させると |
onwaiting | <video> | 次のフレームのためのバッファーによって中断すると |
Miscイベント | ||
ontoggle | <details> | <details>を開くまたは閉じたら |
関連(Related)
HTML、CSS、DOMの基本用途一覧です。基本としていますが、公の基準ではありません。
HTML
CSS
- コメントアウト
- /* , */
- @ルール(at-rule)
- @import、 @media
- 一括指定
- all
- 最優先
- !important
- 擬似クラス、疑似エレメント
- 擬似クラス、疑似エレメント
DOM
- コメントアウト
- /* , */ もしくは 行頭に // (JavaScriptのコメントアウトです)
Event、Node
- インターフェイス
- EventTarget、 Event、 Node、 NodeList
- イベント
- error、 fullscreenchange、 fullscreenerror
- プロパティ
- bubbles、 cancelable、 currentTarget、 defaultPrevented、 detail、 eventPhase、 isTrusted、 target、 timeStamp、 type、 view
- メソッド
- preventDefault()、 stopImmediatePropagation()、 stopPropagation()
クッキー、Web Storage
- インターフェイス
- StorageEvent
- イベント
- プロパティ
- メソッド