前回、JavaScriptの基本的な文法についてまとめました。今回はJavaScriptの重要な要素である「イベント処理」についてまとめたいと思います。
たった数種類の記述にはなりますが、それでも多くの事が可能になる非常に便利なプログラムです。
※なお、ライブラリは使いません。ネイティブなJavaScriptで記述します。
目次
初めに
「DOM」という仕組みについて
オブジェクト（プロパティの集まり、変数や数値、関数など）を通じてHTMLにアクセスする仕組みを「DOM」（Document Object Model）と呼びます。
つまり、DOMを操作する＝JavaScriptでHTMLを操作する、という事になります。
そして、documentオブジェクトのプロパティには、HTMLを操作するためのメソッド(処理）が多く用意されています。
まず、よく使用するメソッドについて記しておきます。
JavaScriptの主要メソッド
IDを持ったHTML要素を取得するメソッド
HTMLの特定の要素を変更したい場合、その部分をオブジェクトとして取得する必要があります。
その主な例として、下記のような「getElementById」メソッドがあります。
|
1 |
document.getElementById("box"); |
カッコ内は、HTMLの「ID」になります。つまり、このメソッドでHTMLの「box」IDが紐づけされている要素の情報を取得しています。
イベント処理を発生させるメソッド
イベント処理とは、例えばHTML上のボタンをクリックした場合やマウスオーバーした場合など、指定の条件がHTML上で発生した場合に発生する動作の事です。
主な例として、「addEventListener」メソッドがあります。
|
1 2 3 |
対象の要素.addEventListener("click", () => { クリックした後に実行したい内容; }); |
変更をかけたい対象の要素を指定後、「addEventListener」のメソッドを記述します。()内のclickは、イベントタイプになります。
実行したい内容は基本的に「関数」で表します。
上記では「アロー関数」とよばれる記述で、=>で表されていますが、その後の｛｝内にある処理が関数として実行されます。
これは、(“click”, function() { });
でも表せますが、最近ではアロー関数がよく使われてるみたいです。
スタイル変更のメソッド
イベント発生時に実行させたい内容として、CSS（スタイルシート）の変更があります。
記述としては、単に直接記述した内容の通りスタイルに変更をかけたり、または指定した「class」に変更をかけたりする事ができます。
|
1 2 3 4 5 |
//直接CSSを変更 変更したい要素.style.background("red"); //cssのclassを変更 変更したい要素.classList.add("ab"); |
上の段の記述では、変更したい要素の背景を、赤に直接変更しています。
下段では、cssのclassを”ab”に変更しています。
このように、イベントの発生でスタイルの変更を自由に変更する事ができます。
イベント処理の記述
class変更の場合
以上を踏まえて、HTMLにクリックイベントが発生した場合に、そのID要素のcssのclassを変更する記述をまとめてみます。
|
1 2 3 |
document.getElementById("box").addEventListener("click", () => { document.getElementById("box").classList.add("ab"); }); |
これは、boxID要素を指定（左上）、クリックした場合（右上）、boxID要素（左下）のclassをabに変更（右下）というイベント処理になります。
少し長ったらしく見えるので、これは「定数」や「変数」にいれてやるとスリムになります。
|
1 2 3 4 5 |
const box = document.getElementById("box"); box.addEventListener("click", () => { box.classList.add("ab"); }); |
上記にように、ID取得のメソッド「document.getElementById(“box”);」を定数boxに代入することが可能です。
このように、ID取得のメソッドは定数に入れるのが基本となっているようです。
次回は、これらを使って、実際にWEBサイトのメニューバーを作成していこうと思います。
