JavaScriptのイベント一覧・使い方について

JavaScript

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を使用することで、複数のイベントリスナーを同じ要素に追加したり、動的にイベントを設定することが容易になります。

コメント

タイトルとURLをコピーしました