イベント属性(グローバル属性)
グローバル属性にはイベント属性も含まれます。イベント属性はイベントハンドラーと呼ばれます。該当するイベントが発生すると定義された関数、関数式を実行します。
イベント属性一覧
| 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
- イベント
- プロパティ
- メソッド
