@composi/core:

• Install
• Render
• Props
• Events
• Lifecycle
• Hydration
• State
• Fragment
• CDN

Events

Inline Events

You can make your components interact with users through inline events. It's also possible to use event listeners, particularly for setting up delegated events. You'll need to read the documentation for Lifecycle hooks for details on how to do that.

Composi inline events are just like normal JavaScript inline events. You do not need to camel case them like React. They should be lower case. In the event that you accidentally camel case an inline event, Composi will automatically convert it to lower case.

See the Pen @composi/core - Events-1 by Robert Biggs (@rbiggs) on CodePen.

Example

Let's make an interactive list. We're going to define a function handleClick and using it in an inline click event on the list items. For this to work, we'll need to pass the click handler to the child component. Also, notice how we pass values from the render loop to the click handler. This provides the value that the announce event handler will use.

See the Pen @composi/core - Events-2 by Robert Biggs (@rbiggs) on CodePen.

Event Delegation

When you have a long list, having events on every list item uses a lot of memory. Event delegation lets us use just one event to handle click events on all the child elements. So, we'll redo the above example to use event delegation. We do this by registering the event on the list and passing it the event object. In the event handler we check to see what the event target is. If the event target's nodeName is LI, we get its dataset content value that we stored on the list item. We the announce that value. The technique is very simple, actually.

See the Pen @composi/core - Events-3 by Robert Biggs (@rbiggs) on CodePen.

Using event delegation on a list means we can add and delete list items without worry about more or less events. When a component has many nested child component and you are trying to capture the event on one of them, the event has to bubble up to where you are listening for it. It's therefore best to register the delegated event as close as possible to where you want to trap the event. Otherwise a long travel can result in lag time from event occurence to execution.

Event Handlers

We wanted to bring your attention to one detail about how inline events are handled. If you have an event handler that is not expecting any arguments, you can use just its name, no function or parens are necessary:

// Event without arguments:
function Button() {
  // This event handler takes no arguments:
  function alertClick() {
    alert('You just clicked!')
  }
  return <button onclick={alertClick}>Click Here</button>
}

Inline events used like this automatically get the event object passed to them. So you could do this:

function Button() {
  // You can access the event object like this:
  function alertClick(e) {
    alert('You clicked on a button with this text: ${e.target.textContent}.')
  }
  return <button onclick={alertClick}>Click Here</button>
}

Here we use an arrow function with onclick:

return <button onclick={() => alertClick()}>Click Here</button>

However, using an arrow function with an argumentless event handle is not necessary.

Event Handlers with Arguments

If you need to pass an argument to the event handler, you will need to use an arrow function. Notice how we do it in this example:

let count = 0
function Counter({data}) {
  function increaseCount(count) {
    render(<Counter data={count++}/>, 'section')
  }
  return (
    <button onclick={data => increaseCount(data)}>{data}</button>
  )
}
render(<Counter data={count}/> 'section')

No This

Because @composi/core provides only functional components, you never have to worry about the scope of your events. There is no this and so there is no need to use bind or other techniques to preserver the scope of the event handler. Of course, to work, an event handler needs to be in the same scope as the code that calls it. We like to define event handlers inside the component function before the return statement. That way they are encapsulated in the component as private properties and available to the event handlers registered on the component's elements.