onclickの書き方を3つ +1紹介 Javascriptの勉強

2021-03-15

onclickの便利な書き方に出会い、onclickの書き方にもいろいろあるんだなと思ったのでまとめてみます。

onclickとは

onclickはJavaScriptのイベントハンドラーの一つで、クリックされた時にメソッド(関数)を実行したりすることができます。よくあるのはボタンをクリックしたときの処理でしょうか。

いろんなonclickサンプルコード

さてonclick時に動くメソッドを書くにはいろいろな方法があります。それでは見ていきましょう。
(ボタンを使って書いていますが、inputタグやaタグなどにも使えます。)

html上のonclick属性に実行するメソッドを書く方法

一番よく見かける方法かと思います。

See the Pen onclickをhtml上に書く by Nakamoto (@programmerlife) on CodePen.

html上のタグにonclick属性を書き処理を実行しています。

<button onclick="btn1()">Button1</button>

またメソッドも1つだけでなく、2つ書くことも可能です。

<button onclick="btn1();btn2()">Button1</button>

メソッドをセミコロン「;」で区切ります。

htmlを書き加えることが可能であれば便利な書き方です。

onclick属性を追加して処理を書く1(getElementByIdなど)

html側にidやクラス名などがある場合にそれらを利用して要素を取得し、その要素がonclick(クリックされたら)処理を実行するという書き方になります。2番目によく見る書き方かと思います。

See the Pen rNWqxKR by Nakamoto (@programmerlife) on CodePen.

Javascriptで以下の処理を書いています。

document.getElementById("btn").onclick = function() {
    alert("クリックされました");
};

上記はIDの場合ですが、クラスを指定する場合は以下のように書くこともできます。

document.getElementsByClassName("test")[0].onclick = function() {
    alert("クリックされました2");
};

htmlに手を入れることができない場合によく使われています。

また次の章にも書きますが、querySelector()を使用しCSSセレクタで要素を取得することも可能です。個人的にはこちらが楽だと思います。

document.querySelector("#btn").onclick = function() {
    alert("クリックされました");
};

onclick属性を追加して処理を書く2 (変数.onclick = method)

あまり見かけない書き方です。見かけないですが個人的にわかりやすくていいなと思っています。

See the Pen onclick属性を追加して処理を書く2 by Nakamoto (@programmerlife) on CodePen.

querySelectorで要素を取得します。

const btn = document.querySelector('#btn2');

取得した要素のonclick属性にメソッドを代入しています。

btn.onclick = method1;

※ method1の()は省略

おまけ (addEventListener())

onclickではないですがaddEventListener()でクリックイベントを追加する方法もあります。
以下でまとめていますので、気になる方はご覧ください。

おわり

onclickの書き方もわかってないと、え、なんでこれ動いてるの?と混乱するので、1つしか書き方を知らないと危ないなと思いまとめてみました。

他にも素敵なコードを知っていたら教えていただければと思います。

Javascript

Posted by Nakamoto