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

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

 menu

【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>

keyCode =

まとめ

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