on
on メソッドを使用すると、対象の要素にイベントハンドラを登録できます。これにより、ユーザーのインタラクションを簡単にキャプチャし、応答することができます。
下記は、ボタン要素にクリックイベントハンドラを登録する方法を示すサンプルです。
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<button id="target">add count</button>
<br>
<br>
<div id="logger" style="border:red solid 1px;padding:8px;">-</div>
<script>
let count = 0;
$("#target").on("click", ()=> {
$("#logger").text = count++;
});
</script>
在この例では、onメソッドを使用してボタン要素にクリックイベントハンドラを追加しました。ユーザーがボタンをクリックすると、イベントハンドラがトリガされ、カウンターが増加し、結果がページに表示されます。
テンプレート構文の使用方法
target elementにメソッドをバインドするために、テンプレート構文を使用することもできます。以下は例です。
<template component>
<button on:click="addCount">Add Count</button>
<div>{{count}}</div>
<script>
export default {
tag: "on-demo",
data: {
count: 0
},
proto:{
addCount(){
this.count++;
}
}
};
</script>
</template>
この例では、on:clickというイベントをボタン要素にバインドし、addCountというメソッドを呼び出します。ユーザーがボタンをクリックすると、このメソッドが呼び出され、カウンタの値が増えてページ上に表示されます。この方法を使うことで、イベントハンドラをンポーネントのメソッドと関連付けて、より複雑なインタラクションを実現することができます。
event
注册日時の後、呼び出される関数は、eventを引数に取り、オリジナルと同じです。
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<button id="target">add count</button>
<br>
<br>
<div id="logger" style="border:red solid 1px;padding:8px;">-</div>
<script>
let count = 0;
$("#target").on("click", (event)=> {
$("#logger").text = event.type;
});
</script>