CODEWITHSUNDEEP
web-componentcustom-events
Tink
Tink

Reputation: 31

Listening to events on Web Components in HTML

I've looked all over for this, can find lots of examples listening to custom events programatically with JS, but nothing declaratively in HTML.

I've got a web component where I dispatch an event from inside.

If I attach a listener with JS, the handler fires, if I attach the listener in the HTML, it never fires. Is this possible?

<script>
    document.getElementById("myWebComp").addEventListener("myevent", progListener);

    function progListener(event) { 
        //This will fire
        console.log("progListener")
    }

    function declListener(event) { 
        //This will NOT fire
        console.log("declListener")
    }

</script>

<body>
    <my=web-comp id="myWebComp" myevent="declListener(event)" onmyevent="declListener(event)></my-web-comp>
</body>`

Upvotes: 3

Views: 841

Answers (1)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21173

From your comment on the now deleted answer:

a web component still don't act like a proper element

Web Components are proper elements, extended from HTMLElement

And you can not set Custom Event on* declarative Event Handlers on a DIV either
(unless you use build-step tooling that transpiles your code)

So all on* declarative Event handlers can be set on a Web Component:

If you want a custom handler, you use addEventListener

Upvotes: 0

Related Questions