【JavaScript】要素をクリックした時に処理を開始する方法【clickイベント】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

clickイベントってなに?

clickイベントは要素をクリックした時にイベント実行することができます
イベントとはあらかじめ自分で好きに設定した処理のこと。

onclickというプロパティを使用し、以下3種類についてご紹介します。

さっそく、onclickの使い方について見ていきましょう。

基本的な使い方

まず、基本的な使い方から。下記のようなhtmlがあるとします。

<input type="button" value="button" onclick="kihon()">

このbuttonタグを押すと、kihon()が発動します。
javascriptに処理内容を設定してみましょう。

function kihon(){
　alert("これが基本だよ");
}

それでは実際に動くか見てましょう。
buttonをクリックするとアラートが表示されることが確認できますね。

onclickを追加する方法

「クリックすると処理を始める」これがonclickの基本となります。
しかし、登録したいhtmlのタグ全てに「onclick=”〇〇()”」を入力するのは大変です。

簡単に追加できる方法があります。

onclickプロパティ

onclickプロパティは以下のように使うことができます。

実際の例で見てみましょう。
こちらのbuttonタグにクリックイベントを設定したい場合です。

<input type="button" value="button"　id ="test">

JavaScriptは①idを変数として取得②その変数にonclickプロパティを使う
という順番で処理したい関数に設定することができます。

let hensu = document.getElementById("test")
hensu.onclick = tuika

function tuika(){
 　alert("追加できたよ"); 
}

変数:hensuをクリックした時、関数:tuikaを発動するという意味になります。
実際の処理結果がこちら。しっかり動いていますね。

これだけでイベントを登録することができます。

引数を使用する方法

最後に、onclickで引数(関数に渡す値)を使用する方法です。
htmlで2種類のクリックイベントを用意してみました。

<input type="button" value="私はボタンです" id="btn" onclick="zibun(this.value)">
<input type="button" value="青色" id="btn_color" onclick="colorChange(this)">color" onclick="colorChange(this)">

少し長いので、先に結果だけ見てみましょう。

引数を使おう

クリックイベントで発動する関数(zibun/colorChange)は以下の通りです。

function zibun(value){
  alert(value)
}

function colorChange(object){
    if(object.value =="青色"){
      object.value = "赤色"
      object.style.color = "red"
    }else{
       object.value = "青色"
       object.style.color = "blue"
    }
}

関数内でわざわざ変数を宣言するのは手間がかかります。

一方、クリックした要素から「this.value」「this」などを関数に渡すことでコードが分かりやすくなります。

特に「クリックした要素自体のCSSやテキスト」を変化させたい時は有効です。
ご活用ください。

まとめ

最後に、onclickを使ってクリックイベントを登録する方法をまとめます。