【JavaScript Clickイベント】HTMLのボタンが押されたときの処理【JavaScript入門】
おはようございます、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
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
- 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のやり方です。
クリックイベントは、使用頻度が非常に高いのでしっかりと学習していきましょう!