change code to use `.addEventListener` instead?

When using addEventListener, one could pass an object onclick=${{ handleEvent }}.

This article explains it in more details what potential benefits this can have: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

I guess it would need only a single change here: https://github.com/shama/bel/blob/68b261e6892170fb972f4488ab4dfc200b125213/browser.js#L76

el[p] = val would become el.addEventListener(key.slice(2), val)

---

I can make the PR if this change would be desirable. If there are reasons why this would not be desirable, I’d be curious to learn about the reasons too 😃

[goto-bus-stop]

@serapath you might be interested in #102 if you didn’t see it yet!

[serapath]

@goto-bus-stop I just checked your PR and the issue you linked that motivated it.

I personally would prefer a more minimal change, because:

1. i don’t need to copy events, because i’m not using nanomorph or any generic mutation approach
   • component authors know which events they use
2. i am building template snippets for components that want to re-use the same { handleEvent } object
   • it seems in your PR, each tag get’s it’s own { handleEvent } object

So i would just pass for any listener on${event.type} the same { handleEvent } object of the component the template belongs to. Each individual tag in that template would would then have a data-call=handlerName attribute, which makes the { handleEvent } actually pretty generic

module.exports = mycomponent
module.exports.prototype = {
  handleEvent (event) { this[event.target.dataset.call](event) }
  foobar (event) { }
  barbaz (event) { }
}
function mycomponent () {
  if (!(this instanceof mycomponent)) return new mycomponent()
  // ...
  var el = bel`
    <div class="mycomponent">
      <button data-call=foobar onclick=${this}> foobar </button>
      <button data-call=barbaz onclick=${this}> barbaz </button>
    <div>`
  // ...
}

…but of course, just passing this currently doesn’t work, because bel does not support the { handleEvent } standard