JavaScriptでタイマーを作っていたのですが、改めて自分以外の人にどのようにタイマーを作ったのか説明する時に以外と理解できてない！と気づいたので、調べてまとめてみました。

getElementById

これはしょっちゅう使っていたのでよく使うやつ！（ボキャ貧）

と思っていましたがこれなに？と聞かれると説明できないものなので調べました。

当たり前ですがすぐ出てきました。

HTML要素の取得を簡単に行うことができるそうです。

確かに。。今まで行なっていたことはdocument.getElementById('')の''の中のクラスを実行していた。。

私の書いていたコードだと、、

main.jsより

var start = document.getElementById('start');

var stop = document.getElementById('stop');

styles.cssより

#start {

　float: left;

}

#stop {

　float: right;

}

#start, #stop {

　cursor: pointer;

　font-size: 18px;

　width: 145px;

　background: #eee;

　height: 40px;

　line-height: 40px;

　box-shadow: 0 6px 0 #ccc;

}

めっちゃcssで定義していたもの引っ張ってきてるやーんと思った話です。

addEventListener

私は英単語が並んでいると意味を考えがちで、What is EventListener? wait how can we listen event???と頭の上ではてなマークが並びました。

「特定のイベントが対象に配信されるたびに呼び出される関数を設定」

困った。nihongo弱い系には難しい。。

ということでまた探してみると。。

「Webブラウザ上で発生したイベント（マウスクリック）に応じて指定した関数を呼び出すことがよくあります。このようなイベント処理を実現する仕組みとして、JavaScriptでは、addEventListener()が用意されています」

おお！わかるかも！

このサイトによるとaddEventListener()は同一のイベントに複数の処理を登録することを可能としてくれるようです。

確かにaddEventListner()を何回か使って複数の処理を定義していました、私！

このaddEventListener()の構文を確認すると

start.addEventListener(イベントのタイプ, 関数, オプション)となっています。

start.addEventListener('click', function() {

私が使っていたaddEventListner()ならclickイベントを呼び出し、function()は一つしか定義していなかったため、function()となっていたということですね！オプションは省略していたため、falseとデフォルトで設定しています。

まとめ

getElementById()はHTML要素の取得を行い、addEventListener()は同一のイベントに複数の処理を仕込ませていました。

これは多分、何回か使っていかないと完全に理解できないので、JavaScriptもっと触らないと。。

基礎的な話でした！