javascriptでページに変化をつける

addEventListener()とは

一言でいうと、addEventListener()はJavaScriptからイベント処理を実行することができるメソッドです。

addEventListener()の構文について一般的には、イベントの「種類」と処理を実行するための「関数」を指定することになります。

document.addEventListener( 種類, 関数, false )

※「document」は、documentオブジェクトと呼ばれ、Chrome等のブラウザ上で表示されたドキュメントを操作する事ができます。

第1引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定します。

第2引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行できる。

第3引数は、イベント伝搬の方式を「true / false」で指定するのですが通常はfalseを指定しておきましょう。

querySelector()は、JavaScriptから任意のHTML要素を検出・取得することができるメソッドになります。

querySelectorAll()は指定した全てのHTML要素を検出してくれます。querySelectorは一つの要素しか取得できませんが、Allがつくと全ての要素を配列で取得してくれます。

例えば、view側でリスト形式で表示している物に対して、querySelector()で<li>を指定した場合、初めの一つまでしか検出されませんが、querySelectorAll()で指定した場合、<li>の全てを検出してくれると言うわけです。

【参照サイト】

rubyのeachメソッドの様な配列を処理する繰り返しのメソッドで下記の様な使い方をします。

var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
 
items.forEach(function( value ) {
     console.log( value );
});

通常のjavascriptのループ文は下記ですが、forEachを使うことでとてもスッキリ書けています。

var array = [1,2,3,4,5];
 
for( var i=0; i<array.length; i++) {
  
  console.log( array[i] );
 
}

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。

DOMは以下のような特徴をもっている。

イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。

参照サイト