JavaScript クリックイベントをJavaScriptで実現するサンプル

投稿日：2018年11月3日

JavaScriptでクリックイベントを実装しよう！

１、２箇所だけクリックイベントを実装したい時ってありますよね。
そのためだけにjQueryを読み込ませるのも表示速度が遅くなってもったいない気がします。

そんな時は、ちゃちゃっとJavaScriptで実装してしまえば、皆幸せになりますね！

JavaScript idボタンがクリックされた時

jQueryとは少し勝手が違いますが、そこまで難しくはありません。
まずはidが設定されたボタンがクリックされたイベントを実装してみます。

<button id="btn01">btn01</button>

1	<button id="btn01">btn01</button>

document.getElementById("btn01").onclick = function() {
    alert("ID: btn01がクリックされました。");
}

document.getElementById("btn01").onclick = function() {

alert("ID: btn01がクリックされました。");

}

jQueryだと$("#btn01")と短くかけますが、JavaScriptだと document.getElementById("btn01")となります。

後はonclickイベント処理を書くだけですね。

書きぶりは少し長くなりますが、わざわざjQueryを読み込む必要が無くなりますので、画面表示の高速化につながります。

JavaScript classボタンがクリックされた時

クラスの場合は少しだけ面倒です。

<button class="btn02">btn02</button>
<button class="btn02">btn02</button>
<button class="btn02">btn02</button>
<button class="btn02">btn02</button>

let targets = document.getElementsByClassName("btn02");
for(let i = 0; i < targets.length; i++){
  targets[i].addEventListener("click",() => {
        alert("CLASS: btn02がクリックされました。");
  }, false);
}

let targets = document.getElementsByClassName("btn02");

for(let i = 0; i < targets.length; i++){

targets[i].addEventListener("click",() => {

alert("CLASS: btn02がクリックされました。");

}, false);

}

idとは違いclassは複数あるので、一旦変数targetにすべて保存します。
classもjQueryだと$(".btn02")と書けますが、JavaScriptだと getElementsByClassName("btn02")となります。
後は取得したtargetに1つ1つ処理をセットしていけばOKです。

制作したサンプル

See the Pen JavaScript クリックイベントをJavaScriptで実現するサンプル by clue-design (@clue-design) on CodePen.0

大きな画面で見る場合はこちら

皆さんもちょっとした処理だけを実装したい場合は、JavaScriptで実装してみてはいかがでしょうか？

執筆者：sasaki

JavaScript クリックイベントをJavaScriptで実現するサンプル

JavaScriptでクリックイベントを実装しよう！

JavaScript idボタンがクリックされた時

JavaScript classボタンがクリックされた時

制作したサンプル

制作したサービス

相互リンク