【 clickイベント 】について初心者向けに解説します。~javascript入門~
このような方にオススメの記事
- javascriptの学習を始めた方
- clickイベントについて知りたい方
【 clickイベント 】について
この記事は、下記のようなある要素をクリックした時に、clickイベントが発火してテキストの文字や色が変わるようなアニメーションを解説します。
サンプルコード
See the Pen Untitled by Shuhei Nishida (@shu0814) on CodePen.
このようなアニメーションを実装する際の手順は
・処理（関数）の定義づけ
・処理内容の記述
・関数の発火
上記３つの手順で記述します。
contents
①実装する処理定義づけ
まず、どのような処理(関数)を実装したいか定義づけを行います。
下記方は、【function 関数()｛ここに処理内容を記述｝】のようになります。
ここでは、【process】という関数を定義付けます。
処理内容の記述
次に定義したprocessという関数の処理内容を記述していきます。
一つ目は、テキストの中身を取得する”textContent”
二つ目は、クラスを付与する”classList.add”
ここでは、ID属性に’target’を持つ要素のテキストを変更すること、
そして、ID属性に’target02’を持つ要素に’changed’というクラスを付与します。
※cssでchangedにフォント赤字のプロパティを指定しています。
定義した関数の発火
最後に定義したprocessの発火条件を記載します。
.addEventListener(‘条件’,関数)で記述します。
下記では、ID属性にtriggerの要素をクリックした時に発火します。
結果的に、javascriptのコードは下記のようになります。
HTML,CSSはある程度勉強したけどjavascriptってまだよくわからない。そのように感じている人は多いではないでしょうか？
Web制作ブログ【javascript編】では、javascriptの基本的なところから、様々なアニメーションのつけ方まで初学者向けに紹介していきます。
ABOUT AUTHOR
シュウヘイ
フリーランスのマークアップエンジニアとしてweb制作を中心に活動
HTML,CSS,Wordpress,javascript,その他独学方法やWeb制作フリーランスの経験談について情報を発信しています。
