Как работают атрибуты обработчика событий HTML?
только что получил вопрос о том, как работает HTML.
Насколько я знаю, атрибутом HTMLElement является только 'string | нулевой'
но, как мы знаем, в HTML
<div onclick = "sayHi()" />
работает.
Мне интересно, как строка «sayHi» получает карту в фактический объект функции.
и заранее, для веб-компонентов, можем ли мы передавать функции в атрибуты веб-компонента? не использовать глобальный объект в качестве прокси?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Эта ссылка MDN неверна (ИМХО), когда в ней говорится, что такие встроенные события не должны использоваться.
https://javascript.info/introduction-browser-events есть лучшее и более полное объяснение.
this.onclick = (evt) => { } полностью действителен при использовании в connectedCallback веб-компонента,
потому что внешний мир не должен иметь ничего общего с внутренними компонентами веб-компонентов, а this.addEventListenerer("click",(evt=>{ }); (который делает то же самое, но допускает несколько событий) просто длиннее,
и подразумевает использование необязательного removeEventListener, потому что прослушиватели на узлах DOM (веб-компонент) собираются мусором, поэтому автоматически удаляются.
Примечание <my-component onclick = " "> — это другое обозначение одного и того же обработчика this.onclick. Если вам действительно нужно добавить обработчик кликов в HTML, вы можете сделать <my-component onclick = "this.getRootNode().METHOD()"> для вызова метода в вашем веб-компоненте.
this.onclick = ()=>{ } переопределит ваш обработчик, определенный в HTML.
ПРИМЕЧАНИЕ
спасибо за напоминание, Кайидо
<my-component onclick = "function()">работает в глобальном масштабеи
this.onclickработает в области компонента
Это просто неправильно. Атрибут содержимого события (тот, который вы задали в разметке) не имеет ничего общего с атрибутом .onevent IDL.
это ТАК, все дело в коде. Увы jsfiddle.net/WebComponents/59f4t7s2 пишет "Кайидо неправ" в моем браузере
Нет, извините, они просто ведут себя по-разному: jsfiddle.net/hv3uwn61 vs jsfiddle.net/hv3uwn61/1 Пожалуйста, читайте темы, о которых вы говорите.
Да, они работают в разных областях, но это один и тот же обработчик.
Они просто делают разные вещи. Вопрос в том, как атрибут содержимого преобразует DOMString в функцию. Ваш ответ говорит, что это то же самое, что и атрибут IDL. Это неправильно. И нет, он не «работает в глобальном масштабе», он работает в очень подверженном ошибкам with document { with target{ } } масштабе. Вот почему все говорят, что их следует избегать. И this.onclick работает в любой области видимости, в которой была объявлена функция, для которой она была установлена.
Опять же, this.onclick перезаписывает onclick = ".." Это тот же обработчик. Во втором примере объясните, почему в консоли есть только одна строка, и какая строка кода регистрирует эту строку... ее poteytoes potaatoes между ботаниками JS.
Вопрос именно в том, чем потейтоес отличается от картофеля. Так что да, установка атрибута IDL перезапишет содержимое, и наоборот, но вопрос не в этом. Еще раз возникает вопрос, как DOMString преобразуется в функцию. Атрибут IDL просто не выполняет такое преобразование, и поэтому никто не возражает против его использования.
См. другие вопросы ОП, он начинающий разработчик JS. Научите его, как держать молот, а не как ковать железо.
Нет, просто ответьте на поставленный вопрос. Но на самом деле незачем, на этот вопрос уже был ответ в другом месте.