@Kirill-Gorelov
С ума с IT

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

Я сам бэкенд, иногда интересно поделать что-то по JS.
И тут зашел по работе на draw.io
И стало интересно с помощью каких фреймворков и библиотек делают такие интерфейсы?
Понятно, что фреймворк может быть любой или даже без него, но заинтересовало следующее. Как они навешивают события на конкретные элементы без параметров?
63cbd2a9d8023270091327.jpeg
  • Вопрос задан
  • 519 просмотров
Пригласить эксперта
Ответы на вопрос 5
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Скорее всего, через всплытие событий.
Ответ написан
Комментировать
firedragon
@firedragon
Senior .NET developer
Как вариант
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);
Ответ написан
Комментировать
@golubevstudio
события на конкретные элементы без параметров


тот факт, что в html коде вы видите одинаковые элементы выполняющие разные функции - не значит что они реально одинаковые.

Рекомендую посмотреть к примеру как работает canvas. Есть куча веб-приложение в html коде которого вы увидите чисто один тег.
Ответ написан
Комментировать
sergiks
@sergiks Куратор тега JavaScript
♬♬
Два варианта, которые не видны в разметке:
  1. element.addEventListener('click', handlerFunction);

  2. делегирование событий: слушают события не на самих элементах, а выше, на общем родителе. Тоже, скорее, не через onclick="handler" в разметке, а через addEventListener()
Ответ написан
Комментировать
vool
@vool
Разработчик
Через 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);
   }
}


Надеюсь помог вам?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы