Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

change code to use `.addEventListener` instead?

See original GitHub issue

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

This article explains it in more details what potential benefits this can have:

I guess it would need only a single change here:

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 😃

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

goto-bus-stopcommented, Dec 6, 2017

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

serapathcommented, Dec 7, 2017

@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) }
  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>
  // ...

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

addEventListener vs onclick - javascript - Stack Overflow
onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements. addEventListener can take a third...
Read more >
EventTarget.addEventListener() - Web APIs | MDN
It allows adding more than one handler for an event. This is particularly useful for libraries, JavaScript modules, or any other kind of...
Read more >
The addEventListener() Method – JavaScript Event Listener ...
This tutorial shows you how you can implement addEventListener() in your code. Understanding Events and Event Handlers Events are actions ...
Read more >
AddEventListener JavaScript: What It Is and How To Use It
For instance, use “change” rather than “onchange.” Some DOM events are click , change , drag , copy , etc. function is a...
Read more >
addEventListener() function vs on property - this vs that
The other way is to use the onclick property or inline onclick attribute such ... the third parameter of addEventListener to true or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found