DOM events

Event listeners are vanilla javascript in Bulba. Bind the handler and create an event listener normally.

Template example

Wait until onMount() to query and set an event listener to your component elements.

constructor() {
  this.handleClick = this.handleClick.bind(this)
}

handleClick() {/**/}

onMount() {
  this.button = this.shadowRoot.querySelector(".my-button")
  this.button.addEventListener("click", this.handleClick)
}

onUnmount() {
  this.button.removeEventListener("click", this.handleClick)
}

JSX example

Similar to the template example, but you can bind right to the JSX node in question.

constructor() {
  this.handleClick = this.handleClick.bind(this)
}

handleClick() {/**/}

render() {
  return (
    <button on-click={this.handleClick}>Click me</button>
  )
}