【SVG】イベントリスナによるイベント処理

イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メソッドをイベントハンドラと呼びます。

イベントリスナーの設定

要素名.addEventListener("イベント名", function(event) {
  //処理の中身
}, false);

イベント名には、次のようなものがある。

• click:マウスでクリックされたとき
• mousedown:マウスのボタンが押されたとき
• mouseup:マウスのボタンが離されたとき
• mouseover:マウスポインターが重なったとき
• mouseout:マウスポインターが外へ出たとき
• mousemove:マウスが移動したとき
• keydown:キーボードのキーが押されたとき
• keyup:キーボードのキーが離されたとき

マウスによるイベント

特定の領域内をマウスが移動したときに、マウスの座標をコンソールに出力する。

<rect id="rect" x="0" y="0" width="100" height="100" fill="green"/>
<script type="text/javascript">

var rectobj = document.getElementById("rect");
rectobj.addEventListener("mousemove", function(event) {
  console.log(`offsetX=${event.offsetX}, offsetY=${event.offsetY}`);
}, false);

</script>

キーボードによるイベント

入力されたキーのコードが表示される。

<text id="text" x="10" y="36" font-size="12" fill="magenta">keyCode = </text>
<script type="text/ecmascript">
var text = document.getElementById("text").firstChild;

document.documentElement.addEventListener("keydown",function(event) {
  text.data = `keyCode = ${event.keyCode}`;
}, false);

</script>

まとめ

イベントリスナによるイベント処理について書きました。イベントの種類はいくつかあるので、それぞれ試してみると良いです。