ホーム プログラミング言語 Web関連 javascript JSイベント(イベント)処理

JSイベント(イベント)処理

 
 
JS イベント (イベント) は、リンクやボタンをクリックする、テキスト ボックスにテキストを入力する、キーボードのキーを押す、マウスを動かすなど、ユーザーが Web ページを操作するときに発生するものです。 JavaScript でイベント ハンドラー (イベント リスナーとも呼ばれる) を使用すると、イベントの発生時に特定のプログラムを検出して実行できます。

 

通常、イベントの名前は、クリック イベント onclick、ページ読み込みイベント onload など、単語onで始まります。次の表に、JavaScript で一般的に使用されるイベントをいくつか示します。

イベント 説明
マウスとキーボードのイベント onclick このイベントはマウスをクリックすると発生します
ondblclick このイベントは、マウスがダブルクリックされたときに発生します
onmousedown このイベントはマウスが押されたときに発生します
onmouseup このイベントは、マウスを押して放したときにトリガーされます。
onmouseover このイベントは、マウスが要素上に移動すると発生します。
onmousemove このイベントはマウスが移動されたときに発生します
onmouseout このイベントは、マウスが要素の境界を離れると発生します。
onkeypress このイベントは、キーボードのキーが押されて放されたときに発生します。
onkeydown このイベントは、キーボードのキーが押されたときにトリガーされます
onkeyup このイベントは、キーボードのキーが放されたときにトリガーされます
ウィンドウイベント onabort このイベントは、ダウンロード中にユーザーが画像を中断したときにトリガーされます。
onbeforeunload このイベントは、現在のページのコンテンツが変更されようとしているときにトリガーされます
onerror このイベントはエラーが発生したときに発生します
onload このイベントは、ページコンテンツの読み込みが完了したときに発生します。
onmove このイベントは、ブラウザのウィンドウが移動されたときに発生します。
onresize このイベントは、ブラウザのウィンドウ サイズが変更されたときにトリガーされます
onscroll このイベントは、ブラウザのスクロール バーがスクロールされると発生します。
onstop このイベントは、ブラウザの停止ボタンが押されたとき、またはダウンロード中のファイルが中断されたときにトリガーされます。
oncontextmenu このイベントは、右クリックのコンテキスト メニューがポップアップしたときにトリガーされます。
onunload このイベントは、現在のページが変更されたときにトリガーされます
フォームイベント onblur このイベントは、現在の要素がフォーカスを失ったときに発生します。
onchange このイベントは、現在の要素がフォーカスを失い、要素のコンテンツが変更されたときに発生します。
onfucus このイベントは、要素がフォーカスを取得したときに発生します。
onreset このイベントは、フォームのリセット ボタンがクリックされたときに発生します。
onsubmit このイベントはフォームが送信されたときに発生します

イベントバインディング

イベントは、HTML 要素にバインドされた後にのみトリガーできます。イベント ハンドラを HTML 要素にバインドするには、さまざまな方法があります。最も簡単なのは、onclick、onmouseover、onmouseout およびその他の属性などのHTML イベント属性を介してイベント ハンドラを直接バインドすることです。

onclick 属性を例として、指定された HTML 要素のマウス クリック イベント (つまり、要素上でマウスの左ボタンがクリックされたときにトリガーされるイベント) を定義できます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="myBtn()">ボタン</button>
    <script type="text/javascript">
        function myBtn(){
            alert("こんにちは、世界!");
        }
    </script>
</body>
</html> 

上記の方法に加えて、次の例に示すように、JavaScript で提供される組み込み関数を直接使用して、指定された要素のイベント ハンドラーをバインドすることもできます。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" id="myBtn">ボタン</button>
    <script>
        function sayHello() {
            alert('こんにちは、世界!');
        }
        document.getElementById("myBtn").onclick = sayHello;
    </script>
</body>
</html> 

JS イベントの例

一般に、イベントはマウス イベント、キーボード イベント、フォーム イベント、ウィンドウ イベントの 4 つのカテゴリに分類でき、その他にもいくつかのイベントがあります。ここでは、より一般的に使用されるイベントのいくつかを簡単に紹介する例をいくつか示します。

1) onmouseover イベント

onmouseover イベントは、ユーザーのマウス ポインターが要素上に移動したときにトリガーされるイベントを指します。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onmouseover="alert('あなたのマウスがこのボタンに移動しました。');">ここにマウスを移動してください</button><br>
    <a href="#" onmouseover="myEvent()">ここにマウスを移動してください</a>
    <script>
        function myEvent() {
            alert('あなたのマウスがこのリンクに移動しました。');
        }
    </script>
</body>
</html> 

2) onmouseout/オンマウスアウトイベント

onmouseout イベントは、onmouseover イベントの逆です。onmouseout イベントは、マウスが要素から離れるとトリガーされます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
    <script>
        function myEvent() {
            alert('マウスカーソルが指定された要素から離れました。');
        }
        document.getElementById("myBox").onmouseout = myEvent;
    </script>
</body>
</html> 

3) onkeydown/オンキーダウンイベント

onkeydown イベントは、ユーザーがキーボードのキーを押したときにトリガーされるイベントを指します。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeydown="myEvent()">
    <script>
        function myEvent() {
            alert("キーボードのボタンを押しました。");
        }
    </script>
</body>
</html> 

4) onkeyup/オンキーアップイベント

onkeyup イベントは、ユーザーがキーボードのキーを押して放したとき (つまり、キーを押して放したとき) にトリガーされるイベントを指します。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeyup="myEvent()">
    <script>
        function myEvent() {
            alert("キーボードのボタンを押して解放しました");
        }
    </script>
</body>
</html> 
 

「 JSイベント(イベント)処理」についてわかりやすく解説!絶対に観るべきベスト2動画

JavaScript Events #1 – On mouseover and double click event
【JSマスター #9】現役エンジニアが教える!実践JavaScript入門 〜イベント編〜