Skip to content

Instantly share code, notes, and snippets.

@raggi
Last active May 7, 2016 22:25
Show Gist options
  • Save raggi/2cf83cb9a2048eef0a0f56582dc8f146 to your computer and use it in GitHub Desktop.
Save raggi/2cf83cb9a2048eef0a0f56582dc8f146 to your computer and use it in GitHub Desktop.
Modern JS event handling mixin
const Handler = Base => class extends Base {
handleEvent (evt) {
return this[`on${evt.type.replace(/^./, c => c.toUpperCase())}`](evt)
}
}
@raggi
Copy link
Author

raggi commented May 7, 2016

Usage example:

class ExampleElement extends Handler(HTMLElement) {
  attachedCallback () {
    this.addEventListener('click', this)
  }
  detachedCallback () {
    this.removeEventListener('click', this)
  }
  onClick (evt) {
    console.log('clicked!')
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment