イベント:ライティング実習1B 6組

イベント

イベントハンドラ

イベントドリブン

イベント(要素に対するキー入力やマウスクリック）が発生すると、それを契機としてあらかじめ指定しておいた処理を行う。

イベントハンドラの種類

Load(body要素): リソースがロードされたとき
Unload(body要素): リソースがアンロードされたとき
Focus: フォーム要素がフォーカスされたとき
入力欄:
Blur: フォーム要素からフォーカスが外れたとき
入力欄:
Change: フォーム要素の値が変更されたとき
入力欄:
KeyPress: フォーム要素のキー入力されたとき
入力欄:
KeyDown: フォーム要素のキーが押されたとき
入力欄:
KeyUp: フォーム要素のキーが離されたとき
入力欄:
Select: フォーム要素のテキストが選択されたとき

aaaaaaaaaa
Click: マウスがクリックされたとき

クリックして
Contextmenu: マウスが右クリックされたとき

右クリックして
DblClick: マウスがダブルクリックされたとき

ダブルクリックして
MouseDown: マウスボタンが押されたとき

クリックして
MouseUp: マウスボタンが離されたとき

クリックして
MouseOver: マウスポインタが要素の上に乗ったとき

ポインタをここに
MouseOut: マウスポインタが要素から離れたとき

ポインタをここに
MouseMove: マウスポインタが要素上を移動したとき

ポインタをここに

イベント処理

html側: 要素内のon[イベント名]属性に実行したい関数名
JavaScript側: on[イベント名]で行いたい処理を関数として定義

<div onclick="function_name();">

function function_name() {
    //処理;
}

例

function changeTextA(){
document.getElementById('here').innerHTML='ポインタを外して';
}

function changeTextB(){
document.getElementById('here').innerHTML='ポインタをここに';
}

<p id="here" onMouseOver="changeTextA()" onMouseOut="changeTextB()">ポインタをここに</p>

ポインタをここに