Adding Interactivity

Event Listeners

Now, what if we want to have a button that calls a function we’ve defined somewhere else on the page that changes the color of the navbar? We can do this using listeners.

The @event syntax tells etcher to add a listener on this component which will then call an expression you provide. In this case, we’ll be calling the changeColor function on the page.

event can be any DOM event that you would use in <HTMLElement>.addEventListener

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
    <button @click={changeColor}>Toggle Color</button>
</nav>

Learn more about Event Listeners.