SvelteJS click delegation example

Component.html

<button delegate-key="foo">Click me</button>
<script>
import { registerClickDelegate, unregisterClickDelegate } from './delegate'
export default {
  oncreate() {
    registerClickDelegate('foo', () => {
      console.log('clicked!')
    })
  },
  ondestroy() {
    this.onClick = this.onClick.bind(this)
    unregisterClickDelegate('foo')
  },
}
</script>

delegate.js

// Delegate certain events to the global document for perf purposes.

const callbacks = {}

if (process.browser && process.env.NODE_ENV !== 'production') {
  window.delegateCallbacks = callbacks
}

function onEvent (e) {
  let { type, keyCode, target } = e
  if (!(type === 'click' || (type === 'keydown' && keyCode === 13))) {
    // we're not interested in any non-click or non-Enter events
    return
  }
  let attr = `delegate-key`
  let key
  let element = target
  while (element) {
    if ((key = element.getAttribute(attr))) {
      break
    }
    element = element.parentElement
  }
  if (key && callbacks[key]) {
    callbacks[key](e)
  }
}

export function registerClickDelegate (key, callback) {
  callbacks[key] = callback
}

export function unregisterClickDelegate (key) {
  delete callbacks[key]
}

if (process.browser) {
  document.addEventListener('click', onEvent)
  document.addEventListener('keydown', onEvent)
}