Как делают такие интерфейсы и навешивают события?

Question

[Кирилл Горелов]

Я сам бэкенд, иногда интересно поделать что-то по JS.
И тут зашел по работе на draw.io
И стало интересно с помощью каких фреймворков и библиотек делают такие интерфейсы?
Понятно, что фреймворк может быть любой или даже без него, но заинтересовало следующее. Как они навешивают события на конкретные элементы без параметров?

Comments

[Вадим]

Не совсем понятно что значит "на конкретные элементы без параметров".
Типа элемент не отличается от соседей, но имеет свой уникальный обработчик? Это можно делать по ссылке на сам элемент. Или при создании элемента через js. Любой элемент это DOM объект, занимающий память. И на этот объект можно навешивать обработчики. Разметка в дереве это лишь вьюшка для этого объекта, если грубо говоря.

Answer 1

[Rsa97]

Скорее всего, через всплытие событий.

Answer 2

[Владимир Коротенко]

Как вариант

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let btn = document.createElement("button");
btn.innerHTML ='hhh'
btn.onclick = ()=>{console.log('hi')}
p.after(btn);

Answer 3

[Сергей Соколов]

Два варианта, которые не видны в разметке:

1. element.addEventListener('click', handlerFunction);

   
   
2. делегирование событий: слушают события не на самих элементах, а выше, на общем родителе. Тоже, скорее, не через onclick="handler" в разметке, а через addEventListener()
   

Answer 4

[Teleweb developer]

Через target:

<div class="menu">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</div>

document.querySelector(".menu").onclick = (ev) => {
   let elem = ev.target;
   if (elem.innerText == "item1") {
       alert(1);
   } else if (elem.innerText == "item2") {
       alert(2);
   } else if (elem.innerText == "item3") {
       alert(3);
   }
}

Надеюсь помог вам?