【初心者向け】JavaScriptでイベントを作成する

プログラミング
この記事で得られること
  • JavaScriptでイベント処理を作成する
  • ボタンをクリックした時にJavaScriptを実行する
  • キーボードを押した時にJavaScriptを実行する

ここら辺に触れていきます。

第1章で、Javascriptの基礎を学んできました。

しかし、2つの弱点があります。それは、、

  • 画面表示時にしかJavascriptを実行できない
  • Javascriptの処理結果を画面に表示できない

第1章では、『画面表示時にコンソール出力』しかしてませんからね。

その2つの弱点を補うために、本記事で『イベント処理』、次回記事で『DOMの操作』を学びましょう!

では、イベント処理いってみましょう!!

イベント処理とは

イベントは、『webページ上で発生する出来事』です。

例えば、

  • ボタンがクリックされた
  • 文字が入力された
  • ページが読み込まれた
  • キーボードのキーが押された

このように、様々なイベントが用意されています。

この『イベント』と、第1章で学んでいるJavascriptの知識を組み合わせれば、

好きなタイミングで、好きな処理を実行させることができます!

ボタンクリックイベントを実装してみよう

では早速、『ボタンクリックイベント』を例に、イベントを使ってみましょう。

index.htmlとsample.jsは作成済みですよね!

まずは、index.htmlファイルに以下のコードを打ち込んでください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
    <p>知識をつけて、楽に生きる</p>

    <button>イベント実行</button>
    <script type="text/javascript" src="sample.js"></script>
</body>
</html>

そしてブラウザで確認すると、ボタンが出ますね。しかし、押しても何も起こりません。

そこでボタンにクリックイベントを追加してみましょう!

<button>イベント実行</button>』を以下のように書き換えてください

<button onclick="test()">イベント実行</button>

onclickは、『ボタンクリック』イベントを追加するものです。

=”test()”は、クリック時に実行する関数を指定できます。

onclick=”test()”は、『クリックされたらtest関数を実行する』ことを示します!

では、sample.jsにtest関数を作りましょう。

function test(){
    alert("クリックイベントが実行されました");
}

それでは、ファイルを保存し、ブラウザ確認行ってみましょう!

ボタンを押したら、メッセージがでてきた!

イベント処理をマスターすれば、好きなタイミングで処理を実行できます。

では、次はキーボードのキーが押された時の処理をみていきましょう

キーダウンイベントを実装しよう

キーダウンイベントは、先ほどと違う方法で実装してみましょう。

さっきの『ボタンクリックイベント』は、HTMLにイベントを追加しました。

今度は、Javascriptからイベントを追加してみましょう

以下のコードをsample.jsに追加しましょう

document.addEventListener('keydown', logKey);

JavaScirptからイベントを追加するにはこのように書きます!

では、sample,jsに、実行関数のlogkeyを実行します。

function logKey(event) {
  console.log(event.code);
}

では、ファイルを保存し、ブラウザで、適当にキーボードを入力してください。

キーボードのキーを押すたびに、コンソールに押したキーが出力されています。

logKey関数の引数に eventが入っているけどこれはなに??

キーダウンイベント時に自動的に渡される引数と解釈してください。

引数”event”の中には押されたキーボードキーの情報が入っています。

ちなみに引数eventなしでも大丈夫です

関数logkeyを以下のようにすると、キーが押されるたびにメッセージが表示されます

function logKey() {
    alert("キーボードのキーが押されました");
}

他の有名なイベント

今回取り上げるのは、『ボタンクリックイベント』『キーダウンイベント』の2つでした。

これ以外にも便利なイベントがありますので、汎用性の高いものをご紹介します。

イベント名イベントハンドラ名説明
clickonclick要素がクリックされた時
changeonchange要素の内容が変更された時
keypressonkeypressキーボードのキーを押した時
loadonloadページが読み込まれた時
mouseoveronmouseover要素にマウスのカーソルが重なった時
selectonselectテキストなどを選択した時
dblclickondblclick要素がダブルクリックされた時
dragondrag要素がドラッグされた時
scrollonscrollスクロールバーがスクロールされた

『イベント名』は、Javascriptから実装する時に指定する名前。

『イベントハンドラ名』はHTMLから実装する時に指定する名前。

と思っておいてください。

イベントマスターになろう

これで、Javascriptの実行タイミングも操れるようになりました!

Javascirptの基本知識と組み合わせればいろんなことが出来そうですね!

さて、次回は、『Javascriptの処理結果を画面に出す』ことをします!

今までは、コンソールか、メッセージにしか処理結果を表示してきませんでした。

次回は、処理結果をWebページに表示させてみましょう!

ではっ!

コメント