0

just got question about how does HTML works.

As far as I know, attribute of HTMLElement is only 'string | null'

but as we know, on HTML


<div onclick="sayHi()" />

works.

I'm wondering, how does 'sayHi' string gets map into actual function object.

and in advance, for web components, can we pass functions to web-component attributes? not using global object as proxy?

user3840170
  • 26,597
  • 4
  • 30
  • 62
Jisang Seo
  • 5
  • 2

1 Answers1

-2

That MDN link is wrong (IMHO) when it says those type of inline events should not be used.

https://javascript.info/introduction-browser-events has a better and more complete explanation.

this.onclick = (evt) => { } is perfectly valid when used in the connectedCallback of a Web Component,
because the outside world should not have anything to do with a Web Components internals, and this.addEventListenerer("click",(evt=>{ }); (which does the same, but allows for multiple events) is just longer,
and implies using a not required removeEventListener because listeners on DOM nodes (the Web Component) are garbage collected, thus automatically removed.

Note <my-component onclick=" "> is a different notation for the same this.onclick handler. If you really need to add a click handler in HTML you might want to do <my-component onclick="this.getRootNode().METHOD()"> to call a method on your Web Component.

this.onclick = ()=>{ } will override your HTML defined handler.

NOTE

thanks for reminding me, Kaiido

  • <my-component onclick="function()"> runs in global scope

  • and this.onclick runs in component scope

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • That's just plain wrong. The event content attribute (the one you set in the markup) is nothing like the `.onevent` IDL attribute. – Kaiido May 30 '23 at 01:20
  • this is SO, its all about code. Alas https://jsfiddle.net/WebComponents/59f4t7s2/ logs _**"Kaiido is wrong"**_ in my browser – Danny '365CSI' Engelman May 30 '23 at 06:19
  • Nope, sorry, they just don't behave the same: https://jsfiddle.net/hv3uwn61/ vs https://jsfiddle.net/hv3uwn61/1/ Please, read about the subject matters you talk about. – Kaiido May 30 '23 at 06:24
  • Yes, they run in different **scope** but they are the same handler – Danny '365CSI' Engelman May 30 '23 at 06:27
  • They just do different stuff. The question is how does the content attribute converts the DOMString to a function. Your answer is saying it's the same as the IDL attribute. This is plain wrong. And no, it doesn't "run in global scope", it runs in very bug-prone `with document { with target{ } }` scope. That's why **everyone** says these should be avoided. And `this.onclick` runs in whatever scope the function it's been set to has been declared to. – Kaiido May 30 '23 at 06:31
  • Again, ``this.onclick`` **overwrites** the ``onclick=".."`` It is the **same handler**. In your second example, explain why there is only **one** line in the console, and which code-line logged that line... its poteytoes potaatoes between JS nerds. – Danny '365CSI' Engelman May 30 '23 at 06:36
  • The question is exactly about how poteytoes differs from potatoes. So yes, setting the IDL attribute will overwrite the content one, and vice-versa but that's not the question. The question once again is *how is the DOMString converted to a function.* The IDL attribute just don't do that conversion and that's why no-one is arguing against its use. – Kaiido May 30 '23 at 06:41
  • See OPs other questions, he is a beginner JS developer. Educate him how to hold the hammer, not how the iron is forged. – Danny '365CSI' Engelman May 30 '23 at 06:50
  • Nah, just answer the question at hand. But actually, no need, this question already had an answer elsewhere. – Kaiido May 30 '23 at 06:53