onclick | WebworksTips

onclickとは、イベントをトリガーにして処理を実行するイベントドリブンモデルで利用できるイベントである。
イベントに対応して処理内容を定義するコードのかたまりのことをイベントハンドラー、またはイベントリスナーと呼ぶ。
onclickは、マウスクリック時に対しての処理をするイベントになる。

使用例

document.getElementById()で文書内のid要素を指定し、その要素をクリックした時の処理をfunction( ){ }内に記述する。

document.getElementById("button").onclick = function() {
  // ここに#buttonをクリックしたら発生させる処理を記述する
};

clickをしたらclass名がfoo-beforeに変わるtoggleStyle

<div id="target" class="foo-after" onClick="toggleStyle()">
  click here!
</div>

var target = document.getElementById('target');
target.onclick = function toggleStyle() {
  this.classList.toggle('foo-after');
  this.classList.toggle('foo-before');
}