- イベントターゲットの取得:
Alpine.jsでは、
$event変数を使用してイベントオブジェクトを参照できます。これにより、イベントが発生した要素（ターゲット）を取得することができます。例えば、以下のようなHTML要素があるとします。
<button x-on:click="handleClick($event.target)">クリック</button>上記のコードでは、x-on:clickディレクティブを使用してボタンのクリックイベントを監視しています。handleClickメソッドには、$event.targetを渡しています。これにより、クリックされたボタン要素がhandleClickメソッド内で利用できるようになります。
- イベントターゲットを使用した処理: 取得したイベントターゲットを使用して、さまざまな処理を行うことができます。例えば、クリックされた要素の属性を変更する、要素を非表示にする、要素の値を取得するなどです。以下にいくつかの例を示します。
- クリックされた要素の属性を変更する:
<button x-on:click="handleClick($event.target)">クリック</button>
<script>
function handleClick(target) {
target.setAttribute('disabled', 'true');
}
</script>上記の例では、クリックされたボタンのdisabled属性をtrueに設定しています。
- 要素を非表示にする:
<button x-on:click="handleClick($event.target)">クリック</button>
<div x-show="showElement">この要素を非表示にします</div>
<script>
function handleClick(target) {
target.parentElement.querySelector('[x-show]').style.display = 'none';
}
</script>上記の例では、クリックされたボタンの親要素にあるx-showディレクティブが設定された要素を非表示にしています。
- 要素の値を取得する:
<input type="text" x-on:input="handleInput($event.target.value)">
<p x-text="inputValue"></p>
<script>
function handleInput(value) {
window.inputValue = value;
}
</script>上記の例では、テキスト入力欄の値が変更されるたびにhandleInputメソッドが呼び出され、inputValue変数に値が設定されます。その後、x-textディレクティブを使用して、inputValue変数の値を表示しています。
Alpine.jsを使用することで、イベントターゲットを取得して使用することが容易になります。上記の例は一部ですが、Alpine.jsのパワフルな機能を活用して、さまざまな動的な処理を実現することができます。