JavaScriptのイベントを一覧表にしました。
イベントの使い方(設定)についても簡単に記載しています。
JavaScriptのイベント一覧
| イベント | 属性 | 内容 |
|---|---|---|
| click | onclick | 設定した要素をクリックしたときに処理される |
| dblclick | ondblclick | 設定した要素をダブルクリックしたときに処理される |
| mousedown | onmousedown | マウスボタンが押されたときに処理される |
| mouseup | onmouseup | マウスボタンが離されたときに処理される |
| mouseover | onmouseover | マウスが要素に乗ったときに処理される |
| mouseout | onmouseout | マウスが要素から離れたときに処理される |
| mousemove | onmousemove | マウスが動いたときに処理される |
| contextmenu | oncontextmenu | コンテキストメニュー（右クリックメニュー）が表示されるときに処理される |
| keydown | onkeydown | キーボードのキーが押されたときに処理される |
| keyup | onkeyup | キーボードのキーが離されたときに処理される |
| keypress | onkeypress | キーボードのキーが押されている間に処理される |
| focus | onfocus | 要素がフォーカスされたときに処理される |
| blur | onblur | 要素からフォーカスが外れたときに処理される |
| change | onchange | フォーム要素の値が変更されたときに処理される |
| input | oninput | 入力フィールドの値が変更されたときに処理される |
| submit | onsubmit | フォームが送信されるときに処理される |
| reset | onreset | フォームがリセットされるときに処理される |
| select | onselect | テキストが選択されたときに処理される |
| load | onload | ページや画像などの要素が読み込まれたときに処理される |
| unload | onunload | ページが閉じられるときに処理される |
| resize | onresize | ウィンドウのサイズが変更されたときに処理される |
| scroll | onscroll | 要素がスクロールされたときに処理される |
| drag | ondrag | 要素がドラッグされている間に処理される |
| drop | ondrop | 要素がドロップされたときに処理される |
| dragstart | ondragstart | ドラッグ操作が開始されたときに処理される |
| dragend | ondragend | ドラッグ操作が終了したときに処理される |
| dragenter | ondragenter | ドラッグされた要素がドロップターゲットに入ったときに処理される |
| dragleave | ondragleave | ドラッグされた要素がドロップターゲットから離れたときに処理される |
| dragover | ondragover | ドラッグされた要素がドロップターゲット上にある間に処理される |
これらのイベントを使用することで、ブラウザ上でのユーザーのさまざまな操作に対して処理することができます。
イベントの使い方
実際にイベントを使用する方法について書いています。
詳細記事があるものは、上記のイベントの箇所にリンクも貼っているのでご確認ください。
HTML要素に対してイベントを設定する
HTMLの要素に対して、直接イベントを設定する場合には下記のように、属性をタグに設定して関数名を書きます。
例えば、クリックイベントを設定する場合、次のように使用できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onclickを要素に設定</title>
</head>
<body>
<button onclick="handleClick()">クリックしてね</button>
<script>
function handleClick() {
alert('ボタンがクリックされました！');
}
</script>
</body>
</html>
解説
この例では、<button>タグにonclick属性を設定し、ボタンがクリックされたときに実行されるhandleClick関数を指定しています。
ユーザーがボタンをクリックすると、アラートメッセージが表示されます。
addEventListenerを使ってイベントを設定する
addEventListenerメソッドを使うことで、コード上で要素を取得してイベントを設定することが可能です。
例えば、クリックイベントを設定する場合、次のように使用できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onclickをaddEventListenerで追加</title>
</head>
<body>
<button id="myButton">クリックしてね</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('ボタンがクリックされました！');
});
</script>
</body>
</html>
解説
この例では、document.getElementById('myButton')でボタン要素を取得し、addEventListenerメソッドでclickイベントを設定しています。
ユーザーがボタンをクリックすると、匿名関数が実行され、アラートメッセージが表示されます。
addEventListenerを使用することで、複数のイベントリスナーを同じ要素に追加したり、動的にイベントを設定することが容易になります。
コメント