クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

JavaScript

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

投稿日:

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

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

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

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

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

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

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

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

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

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

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で実装してみてはいかがでしょうか?

-JavaScript

執筆者:

関連記事

no image

JavaScript 一定時間後に処理を実行させるサンプル(setTimeout)

数秒後に実行される処理を作りたい! 時間差で数秒後に処理したい事がたまにありますよね。 そんな時はJavaScriptのsetTimeoutを使うと簡単に実現することができます。 サンプルを作ったので …


  1. […] 参考 JavaScript クリックイベントをJavaScriptで実現するサンプルクルーデザイン SHARE […]

comment

メールアドレスが公開されることはありません。