JavaScriptイベント
イベントというのは、HTML要素上に発生する出来事である
JavaScriptで、イベントを呼び出せる
イベントは、ブラウザの処理かエンドユーザーの操作に分けられる
例えば、サイトページの読み込みが完了した
HTMLのinputタグが変えた
HTMLのボタンがクリックされた
イベントが呼び出されると、何等かの処理を実施することができる
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">今何時？</button>
<p id="demo"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">今何時？</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>
<p>ボタンクリックして、 <em>displayDate()</em> 関数を実施する</p>
<button onclick="displayDate()">ここクリックしてください</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
イベントはバリデーションチェック、エンドユーザー入力、エンドユーザー操作、ブラウザ動作などに利用することができる
サイトページ読み込みするときに、イベントを呼び出す
サイトページが閉じられるときのも
エンドユーザーがボタンをクリックしたときも
エンドユーザーが入力したフォームの内容チェックなど
JavaScriptイベント実行させる方法としては、
HTMLのイベント属性で、そのままJavaScriptソースを実施させることはできる
また、JavaScript関数を呼びして、処理を行う
定番のイベント
| イベント | 詳細 |
|---|---|
| onchange | HTML 要素変更されるとき |
| onclick | エンドユーザーが HTML 要素をクリックするとき |
| onmouseover | エンドユーザーがHTML要素上にマウスでコンソールを移動させるとき |
| onmouseout | エンドユーザーがHTML要素上からマウスでコンソールを離れるとき |
| onkeydown | エンドユーザーがキーボードのキーを押下したとき |
| onload | ブラウザがサイトページを読み込み完了後 |
