Aptosの新しいイベントハンドラーの使い方

イベントハンドラーの基本的な使い方

イベントハンドラーは、特定のイベントが発生した際に実行される関数です。以下の例では、ボタンをクリックしたときにメッセージを表示するイベントハンドラーを作成しています。

function handleClick() {
  console.log("ボタンがクリックされました！");
}
const button = document.querySelector("#myButton");
button.addEventListener("click", handleClick);

上記のコードでは、handleClickという関数がボタンがクリックされたときに実行されるイベントハンドラーとして設定されています。addEventListenerメソッドを使用して、ボタンに対して"click"イベントが発生したときにhandleClick関数が呼び出されるように設定しています。

イベントオブジェクトの利用

イベントハンドラーは通常、イベントオブジェクトを受け取ることができます。イベントオブジェクトには、イベントに関する情報が含まれています。以下の例では、ボタンをクリックしたときにクリックした座標を表示するイベントハンドラーを作成しています。

function handleClick(event) {
  console.log("クリックした座標:", event.clientX, event.clientY);
}
const button = document.querySelector("#myButton");
button.addEventListener("click", handleClick);

上記のコードでは、eventという引数をhandleClick関数に追加しています。イベントハンドラーが呼び出されると、ブラウザは自動的にイベントオブジェクトを渡します。event.clientXとevent.clientYを使用して、クリックした座標を取得して表示しています。

これらはAptosで新しいイベントハンドラーを使うための基本的な方法とコード例です。他にもさまざまなイベントやイベントハンドラーのオプションがありますので、公式ドキュメントやチュートリアルを参照することをおすすめします。