元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【SVG】イベント

イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。

イベントとは

ユーザによる操作(クリックやマウス操作など)によって、発生する処理を「イベント」と呼ぶ。イベントに対応するスクリプトを記述し実行することができる。

イベント属性

  • onclick:クリックした時
  • onmouseover:ある領域の上に重なった時
  • onmouseout:ある領域の上から出た時
  • onmousedown:ある領域の上でボタンが押された時
  • onmouseup:ある領域の上でボタンが離された時
  • onmousemove:ある領域の上で移動した時

図形にマウスオーバーしたときと、クリックしたときにコンソールに文字列を表示する。

<ellipse cx="50" cy="50" rx="30" ry="30" fill="magenta" onmouseover="console.log('Hello SVG.')"/>
<rect x="20" y="100" width="60" height="50" fill="cyan" onclick="console.log('Hello SVG!!')"/>

イベントハンドラ

イベント属性に設定された関数やメソッドを「イベントハンドラ」と呼ぶ。

図形をクリックするとコンソールに年月日と時間を表示する。

<g fill="magenta" onclick="showDateAndTime()">
  <rect x="30" y="20" width="40" height="20"/>
  <text x="50" y="50" text-anchor="middle" font-size="8">クリックで年月日と時間を表示</text>
</g>

<script type="text/javascript">
function showDateAndTime() {
  console.log((new Date()).toLocaleString());
}
</script>

クリックで年月日と時間を表示

まとめ

イベントは、ユーザの操作によって発生する処理のことです。イベント属性に対して、関数やメソッドを設定します。イベントに設定された関数やメソッドをイベントハンドラと呼びます。イベントハンドラの内容は自由に決められます。