事件

Alpine 让监听浏览器事件并做出响应变得非常简单。

监听简单事件

通过使用 x-on，你可以监听元素上或其内部触发的浏览器事件。

以下是一个监听按钮点击的基本示例：

<button x-on:click="console.log('clicked')">...</button>

你也可以使用事件简写语法 @。以下是同样的示例，但使用了简写语法（接下来我们将使用这种语法）：

<button @click="...">...</button>

除了 click，你还可以按名称监听任何浏览器事件。例如：@mouseenter、@keyup 等都是有效的语法。

假设你想监听 <input> 元素中按下 enter 键的事件。Alpine 通过添加 .enter 让这变得很简单：

<input @keyup.enter="...">

你甚至可以组合按键修饰符来监听按键组合，例如按下 enter 的同时按住 shift：

<input @keyup.shift.enter="...">

在响应浏览器事件时，通常需要"阻止默认行为"（阻止浏览器事件的默认行为）。

例如，如果你想监听表单提交但阻止浏览器提交表单请求，可以使用 .prevent：

<form @submit.prevent="...">...</form>

你也可以使用 .stop 来实现 event.stopPropagation() 的功能。

有时你可能想在代码中访问原生浏览器事件对象。为了方便，Alpine 自动注入了一个 $event 魔法变量：

<button @click="$event.target.remove()">Remove Me</button>

除了监听浏览器事件，你也可以派发它们。这对于与其他 Alpine 组件通信或在 Alpine 之外的工具中触发事件非常有用。

Alpine 为此暴露了一个名为 $dispatch 的魔法方法：

<div @foo="console.log('foo was dispatched')">
    <button @click="$dispatch('foo')"></button>
</div>

如你所见，当按钮被点击时，Alpine 会派发一个名为"foo"的浏览器事件，而 <div> 上的 @foo 监听器会捕获它并做出响应。

由于浏览器事件的性质，有时在顶层 window 对象上监听事件非常有用。

这样你就可以像下面的示例一样在组件之间进行通信：

<div x-data>
    <button @click="$dispatch('foo')"></button>
</div>

<div x-data @foo.window="console.log('foo was dispatched')">...</div>

在上面的示例中，如果我们点击第一个组件中的按钮，Alpine 会派发"foo"事件。由于浏览器事件的工作方式，它们会通过父元素一直"冒泡"到顶层的"window"。

现在，因为我们在第二个组件中通过 .window 在 window 上监听了"foo"，当按钮被点击时，这个监听器会捕获它并打印"foo was dispatched"消息。