イベント

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

イベントの設定

以下のソースはイベントの登録方法をいくつか示しています。
要素に直接登録するときは、イベント名xxxにonを前置しonxxxと記述します。
Javascriptで登録する場合はaddEventListenerを使用します。複数のイベントを登録することができます。removeEventListenerで削除することができます。
a hrefに直接記述することもできます。
1,2ボタン及びリンクをクリックすると対応するイベントが発生し文字を書き換えます。
イベント待ち
3
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id1">イベント待ち</span>
<script type="text/javascript">
function test1(){
var o=document.getElementById('id1');
o.innerText="onclick1";
}
function test3(){
var o=document.getElementById('id1');
o.innerText="onclick3";
}

</script>
<form name="test1Form">
<input type="button" value="1" onclick="test1()" />
<input type="button" value="2" id="id2" />
</form>
<a href="javascript:test3()">3</a><br />

<script type="text/javascript">
function test2(){
var o=document.getElementById('id1');
o.innerText="onclick2";
}

document.getElementById("id2").addEventListener("click",function(){
test2();
},true);

</script>

</body>
</html>

mouseイベント

mousemoveを使用するとカーソル位置を取得することができます。
addEventListenerでSVGの四角形にmousemoveイベントを登録しています。
イベントハンドラでevent.clientX,event.clientYでクライアント座標を取得できます。
その他にeventで以下のものが使用できます。
プロパティ説明
clientX,clientY要素の座標
pageX,pageYページ上の座標(スクロール量が加味される)
screenX,screenYモニター上の座標
offsetX,offsetY要素からのオフセット座標
targetイベントの発生したオブジェクト
typeイベントの種類
canselBubbleイベント伝達
altkeyAltキー押下
altLeft左Altキー押下
ctrlKeyCtrlキー押下
ctrlLeft左Ctrlキー押下
shiftKeyshiftキー押下
shiftLeft左shiftキー押下
metaKeyメタキー押下
buttonマウスボタン押下 0bit目:左 1bit目:右 2bit目:中
keyCodeキーコード
whellDeltaホイール移動量
axisトラックパッド方向
detailホイール移動量
赤い四角形の中でマウスの移動、ボタンの状態を取得することができます。
クライアント座標では扱いづらいのでオブジェクトのクライアント座標をgetBoundingClientRectで取得して左上座標を差し引いでいます。 マウスボタンにもイベント(mouseup,mousedown,contextmenu)を登録しています。
右クリックはcontextmenuイベントを使用しています。ディフォルトではcontextmenuイベント発生後に通常ブラウザの右クリックメニューが表示されてしまうのを防ぐためpreventDefaultと戻り値をfalseに設定します。
すべて共通のイベントハンドラを使用しています。イベントの種類はevent.typeで取得できます。
待機中
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span id="id3">待機中</span><br />
<svg xmlns="http://www.w3.org/2000/svg" xxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100" width="100">
<rect id="id4" x="0" y="0" width="100" height="100" stroke="black" fill="red">
</rect></svg>

<script type="text/javascript">
function test5(){
var o=document.getElementById('id3');
var p=document.getElementById("id4");
var r=p.getBoundingClientRect();
var x=(event.clientX-r.left);
var y=(event.clientY-r.top);
o.innerHTML=event.type+x.toFixed(0)+","+y.toFixed(0)+(event.button & 1 ? "left" : "")+(event.button & 2 ? "right" : "");
event.preventDefault();
}

document.getElementById("id4").addEventListener("mousemove",function(){
test5();
},false);
document.getElementById("id4").addEventListener("mouseup",function(){
test5();
},false);
document.getElementById("id4").addEventListener("mousedown",function(){
test5();
},false);
document.getElementById("id4").addEventListener("contextmenu",function(){
test5();
},false);
</script>
</body>
</html>

イベントの種類

種類xxx説明
ウィンドウresizeウィンドウのサイズが変更(Windowオブジェクトのみ)
scroll要素のコンテンツがスクロール
ドキュメントloadリソースのロードが完了
unloadアンロード (ロードする前)
readystatechangedocumentのreadyState属性が変化
フォームsubmitフォームの送信が要求
resetフォームのリセットが要求
change要素の値が変更され、要素が入力フォーカスを失った
selectテキストが選択
focus要素が入力フォーカスを得た
blur要素が入力フォーカスを失った
inputinputまたはtextarea要素のValueが変化した
マウスclickマウスでクリック
contextmenuマウスで右クリック、またはアプリケーションキーが押されるなどして、コンテキストメニューが表示されるとき
dblclickマウスでダブルクリック
dragドラッグされた
dragendドラッグが終わった
dragenterドロップ目標にドラッグされた
dragleaveドロップ目標からドラッグが外れた
dragoverドロップ目標上にドラッグされている
dragstartドラッグが開始された
dropドロップ目標にドラッグがドロップされた
mousedownマウスボタンが押された
mousemoveマウスポインタが要素の上を移動
mouseoutマウスポインタが要素から離れたとき
mouseoverマウスポインタが要素に乗ったとき
mouseupマウスボタンが離された
mousewheelマウスホイールを回転させた
キーkeydownユーザーがキーを押した
keypressユーザーがキーを押して離した
keyupユーザーがキーを離した
リソースabortリソースのロードが中断された
errorリソースのロード中にエラーが発生した
タッチtouchstart指が置かれた
touchmove指がドラッグされた
touchend指が離れた
スマホorientationchangeスマホの画面が縦横変わる