hamatakeBlog

MENU

【JavaScript Clickイベント】HTMLのボタンが押されたときの処理【JavaScript入門】

f:id:hamatakeBlog:20211007230248p:plain

おはようございます、hamatakeBlogです!

 

JavaScript入門!この記事は、JavaScriptの学習をすでに始めているかた向けの記事となっています。

超初心者編は、こちら⇓からどうぞ!

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法!!その1 - hamatakeBlog

 

今回は

HTML内のボタンがクリックされたときにJavaScriptで処理を実行する方法

をご紹介します。

ウェブページ上で発生するあらゆるアクションことをイベントといいます。別に覚える必要はないけど、「へー、そうなん」ぐらいで聞いててください笑

つまり今回はクリックイベントってことですね。

他にも、chengeやkeydownなどさまざまなイベントハンドラがあるので別途紹介します!

ということで、今回はクリックした時、アラートがでるボタンを作っていきます

完成イメージはこんな感じ⇓

 

それではやっていきましょう!

HTMLでボタンを作成


まずは、HTMLを準備します。

<body>

  <button type="button" id="btn">ボタンをクリック!</button>

  <script type="text/javascript" src="sample.js"></script>

</body>

※今回ボタンタグにフィーチャーするためheadタグなどは省略して記載しています。

詳しくは、こちら⇓の記事を参考にしてHTMLを作成してください。

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法!!その1 - hamatakeBlog

f:id:hamatakeBlog:20211007215054p:plain

HTMLは上記のような画像ができてればOKです。

 

HTMLメモ

  • <button></button>
    ボタンタグ:HTMLにボタンを作成する。
  • type
    タイプ属性:様々な種別を指定する。

 

JavaScriptでクリックイベントを実装していく


それでは、次にJS(JavaScript)の実装に移ります。

一概にクリックイベントといっても実装のやり方が、複数ありまして今回は3つご紹介していきます!

onclickプロパティ

sample.js

// ボタンクリック関数
function butotnClick1(){
    // alert()で、アラートを出力
    alert('ボタンがクリックされました');
}

// document.getElementById()でHTMLの中でid属性がbtnの要素を取得し、変数buttonに代入する
let button1 = document.getElementById('btn');
// buttonのonclickプロパティに上記で宣言しているボタンクリック関数を代入
button1.onclick = butotnClick1;

 

プロパティを使用する場合は、無名関数やアロー関数式を使って実装することも可能です。(ちなみに下記のURLで作成したクリックイベントが無名関数を使ったやり方です)

初心者が3か月で案件デビューしたJavaScript勉強法【JavaScript★独学でも大丈夫★】その2 - hamatakeBlog

JavaScriptメモ

  • function 関数名(){ }
    関数:{ }の中に処理を記載する。
  • alert()
    アラート:( )の中に文字列を記載して、実行時にアラートに文字列を出力する。
  • // コメント
    コメントアウト:// を付けることで実行時には読み込まれない。
  • let 変数名
    変数:文字や数値など値を保持することができる。この変数に値を代入して使用する。
  • =
    代入:数学的な=ではなく、右辺を左辺に代入するという意味。ちなみに等しい場合に使われるのは===または==。

addEventListener メソッド【推奨】

sample.js

function butotnClick2(){
    alert('ボタンがクリックされました2');
}

let button2 = document.getElementById('btn');

// addEventListener( 'イベント', 処理)で要素にイベントが発火した際に処理を実行する
button2.addEventListener('click', butotnClick2);

addEventListenerは、第一引数にイベント、第二引数に処理を記載することで、クリックイベントを発火させます。

また、ほか2つのやり方は、一つのクリックイベントしか設定できませんが、このやり方であれば、複数処理を設定することができます。

onclick属性

sample.js

function butotnClick3(){
    alert('ボタンがクリックされました3');
}

sample.htmlのbuttonタグを修正

<button type="button" id="btn" onclick="buttonClick3()">ボタンをクリック!</button>

最後の方法は、buttonタグにonclick属性を付与するやり方です!

上記のよう記述することで、このボタンをクリックしたときに、" "で囲まれた文字と一致する関数を呼び出します。

まとめ


以上、ボタンクリックされたときの処理でした。今回3つの方法をご紹介しましたが、現在推奨されている方法は、2番目に紹介したaddEventListenerのやり方です。

クリックイベントは、使用頻度が非常に高いのでしっかりと学習していきましょう!