# Events

• Dispatching to other components
  • Dispatch event to update value
  • Dispatch event to open and close
• x-on DOM Events - x-ref with single object defined in script

# Dispatching to other components

# Dispatch event to update value

<div x-data="{ title: 'Hello' }" @set-title.window="title = $event.detail" >
    <h1 x-text="title"></h1>
</div>

<div x-data>
    <button @click="$dispatch('set-title', 'Hello World!')">Click me</button>
</div>

# Dispatch event to open and close

<div x-data>
    <button x-on:click="$dispatch('toggle-sidebar', true)" class="btn">Click to open</button>
    <button x-on:click="$dispatch('toggle-sidebar', false)" class="btn">Click to close</button>
</div>

<div x-data="{ open: false }" @toggle-sidebar.window="open = $event.detail">
    <div :class="open ? '' : 'hidden'"> ... </div>
</div>

# x-on DOM Events

x-on:click.window listening for a click event anywhere in the window then set show = true

<div x-data="{ show: false }" x-on:click.window="show = true;" x-show="show">
    ...
</div>

x-on:my-event.window listining for an emitted event called 'my-event' then set show = true

Livewire allows you to fire browser window events using dispatch() function.

$this->dispatch('my-event', 'Notification message!');

Q. how can an event be dispatched using vanilla javascript?

---

# x-ref with single object defined in script

<div x-data="employee" class="space-y-0 my">
    <p x-text="name"></p>
    <p x-text="email"></p>
    <p x-text="age"></p>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('employee', () => ({
            name: 'John Doe',
            email: 'john@example.com',
            age: '25',
        }));
    });
</script>



{{-- listen for the event --}}
<button class="btn" x-on:click="$dispatch('stuff')">...</button>
<div x-data @stuff="alert('Button Was Clicked!')">

    {{-- dispatch the event --}}
    <button class="btn" x-on:click="$dispatch('stuff')">...</button>
</div>

<button x-data x-on:click="$dispatch('toggleSidebar')">Emit toggleSidebar event</button>

<div x-data="sidebar" @toggle-sidebar.camel.window="toggle()">
    <div x-show="open">open</div>
    <div x-show="!open">hidden</div>
</div>

<script>
    document.addEventListener("alpine:init", () => {
        Alpine.data("sidebar", (initialOpenState = false) => ({
            open: initialOpenState,
            toggle() {
                this.open = !this.open;
            },
        }));
    });

</script>