JavaScriptでクリックイベントを追加する

JavaScriptでクリックイベントを追加する方法をいつもググっているので、やり方をまとめておきます。

サンプルコード

HTML内にonClickを設定する方法です。

HTML

<button id="sample" onClick="sample();">テスト</button>

onClickで設定した関数をJavaScriptに記述します。

JavaScript

function sample() {
	console.log('sample');
}

onClickのデモページ

JavaScript側で完結したい場合、addEventListenerで設定できます。

HTML

<button id="sample">テスト</button>

JavaScript

addEventListenerの第一引数でイベントの種類、第二引数で実行する関数、第三引数でイベントを受け取るタイミングを設定できます。

var target = document.getElementById('sample');
target.addEventListener('click', sample, false);

function sample() {
	console.log('sample');
}

addEventListenerのデモページ
　

【参考サイト】

• クリック時の処理(onClick) – イベント処理 – JavaScript入門
• EventTarget.addEventListener – Web API インターフェイス | MDN
• addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ – 今日もスミマセン。