# Events

In Stratox, you only need to memorize one function for binding events: `bind`. This function works by binding a view instance to an event, making it straightforward to modify the view's component properties. It automatically refreshes the component with the updated data, ensuring the UI stays in sync with your application state.

**Creating an Event**

In the example below, when the user clicks the "Increment +" button, a new value is added to the `props` object, and the view is automatically refreshed to reflect the change.

```javascript
export default function Increment({ props, view }) {
  const clickEvent = view.bind((props, view, item, event) => {
    props.increment += 1;
  });

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <header class="mb">
          <h2 class="headline-2">${props.increment > 0 ? "Incremented" : props.title}</h2>
          <p>Has been incremented <strong>${props.increment}</strong> times!</p>
        </header>
        <a class="button bg-primary sm my-btn" href="#2" onclick="${clickEvent}">Increment +</a>
      </div>
    </article>
  `;
}
```

***

**Manual Updates and Refreshes**

You can disable automatic updates and refreshes by setting the second argument of `bind` to `false`. This allows you to manually control when a view or its components should refresh.

```javascript
// Bind function to add a new item to the list
const handleAddList = this.bind((props, view, item, event) => {
  props.increment += 1;
  // Manually update and refresh the view
  view.update();
}, false);
```

This flexibility gives you full control over your app’s performance, allowing you to refresh components only when necessary.

***

**Why Not Always Refresh the View?**

Refreshing the entire view isn't always desirable. For example, if you bind an `oninput` event to a text field, you wouldn't want the whole view to refresh each time a user types. Instead, you want the text field's value to update without re-rendering the entire view.

Here’s how to handle this scenario:

```javascript
const inputEvent = this.bind((props, view, item, event) => {
  props.value = event.target.value;
}, false);
```

A complete example:

```javascript
export default function Increment({ props, view }) {
  // Bind onclick event with refresh enabled
  const clickEvent = view.bind((props, view, item, event) => {
    props.increment += 1;
  });

  // Bind to oninput event, but with refresh view disabled
  const inputEvent = view.bind((props, view, item, event) => {
    props.value = event.target.value;
  }, false);

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <header class="mb">
          <h2 class="headline-2">${props.increment > 0 ? "Incremented" : props.title}</h2>
          <p>Has been incremented <strong>${props.increment}</strong> times!</p>
        </header>

        <div class="mb">
          <label>Title</label>
          <input type="text" oninput="${inputEvent}" value="${props.value ?? ""}">
        </div>

        <a class="button bg-primary sm my-btn" href="#2" onclick="${clickEvent}">Increment +</a>
      </div>
    </article>
  `;
}
```

***

**Choosing What View to Bind**

By using `this` with the `bind` function, you can access the current component. This means you can also bind events to child components or specific parts of the layout.

Here’s an example:

```javascript
function IncrementUp({ props }) {
  return `
    <header class="mb">
      <h2 class="headline-2">${props.increment > 0 ? "Incremented" : props.title}</h2>
      <p>Has been incremented <strong>${props.increment}</strong> times!</p>
    </header>
  `;
}

export default function Increment({ props, view }) {
  const { view, item, output: IncrementBlock } = view.block(IncrementUp, props);
  
  // Bind an event to the child view
  const clickEvent = view.bind((props, view, item, event) => {
    props.increment += 1;
  });

  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        ${IncrementBlock}
        <div class="mb">
          <label>Title</label>
          <input type="text" value="">
        </div>
        <a class="button bg-primary sm my-btn" href="#2" onclick="${clickEvent}">Increment +</a>
      </div>
    </article>
  `;
}
```

What’s cool is that in this example, only the `IncrementUp` component will refresh when the event is triggered, even though the button controlling the event is outside the `IncrementUp` component. This allows for efficient updates while maintaining precise control over the layout.