【SVG】イベントオブジェクト

イベントオブジェクトは、発生したイベントオブジェクトの情報を持っています。その情報を処理に利用することができます。ここでは、マウスポインタの座標を取得してコンソールに表示してみます。

イベントオブジェクト

イベントオフジェクトとは、発生したイベント自身を表しているいるオブジェクトのこと。evtという名前で、イベントオブジェクトを参照することができる。イベントハンドラの引数にevtを渡す。

<g fill="cyan" onclick="showEventObject(evt)">
  <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 showEventObject(evt) {
  console.log(evt.toString());
}
</script>

マウスポインタの座標の取得

発生したイベントに関する情報を取得する。ここでは、マウスポインタの座標を取得する。

• offsetX:x座標の値
• offsetY:y座標の値

<rect x="0" y="0" width="100" height="70" fill="magenta" onmousemove="showPosition(evt)"/>

<script type="text/javascript">
function showPosition(evt) {
  console.log(`offsetX = ${evt.offsetX}, offsetY = ${evt.offsetY}`);
}
</script>

要素オブジェクトの取得

イベントオブジェクトが持つ「targetプロパティ」には、イベントが発生した要素オブジェクトが設定される。イベントで要素の属性を取得・設定するときは、targetプロパティを介す。ここでは、クリックで要素オブジェクトをコンソールに出力する。

<rect x="10" y="10" width="30" height="20" fill="cyan" onclick="showElementObject(evt)"/>
<ellipse cx="70" cy="20" rx="20" ry="10" fill="magenta" onclick="showElementObject(evt)"/>

<script type="text/javascript">
function showElementObject(evt) {
  console.log(evt.target);
}
</script>

まとめ

イベントオブジェクトを介したマウスポインタの座標の取得について書きました。また、イベントを介してイベントオブジェクトが持つ要素オブジェクトを参照する方法をご紹介しました。