#javascript #html #jquery
Вопрос:
Очень случайный вопрос, я только что посмотрел instagram, и когда вы нажимаете на эти 3 точки в ленте на следующем посте пользователя, у вас есть несколько вариантов: https://i.stack.imgur.com/oDUXA.png
Я посмотрел, как и все, на элемент проверки, и я вижу, что для каждой кнопки одно и то же имя класса.
Итак, как они узнали, что я, например, нажал на кнопку «Перейти к публикации»?
Пример кода таков:
<button class="testButtonClass">Report this user</button>
<button class="testButtonClass">Go to user profile</button>
<button class="testButtonClass">Cancel</button>
Я имею в виду, что они наверняка используют javascript, чтобы узнать, какая кнопка была нажата, так как я могу знать, что он нажал «Перейти в профиль пользователя»?
Кстати, используя имя (пример ниже), это будет проще, верно?
<button class="testButtonClass" name="reportUser">Report this user</button>
<button class="testButtonClass" name="viewUserProfile">Go to user profile</button>
<button class="testButtonClass" name="cancelBtn">Cancel</button>
Комментарии:
1. Я предполагаю, что у них есть общая функция обработчика событий, и с помощью этой функции они проверяют текст кнопки.
2. @ControlAltDel они проверяют «текст» кнопки ? На уровне «Instagram»? Никогда. Они используют фреймворк, такой как ReactJS, и используют обработчики onclick, которые запускают методы. Это может быть один метод, общий для всех элементов и использующий ссылки, или для каждого элемента используется другой метод. Например,
<item onClick={goToProfile} >Go to profile</item>но, конечно, они не проверяют наличие текста. Кто это делает ?
Ответ №1:
Instagram использует React JS, который позволяет привязывать функции, не получая ссылки на них по идентификатору или классу. Если вы откроете Instagram в Chrome с расширением React Developer Tools, вы действительно увидите, что он его использует.
Если вы проверите, выберите кнопку, которую хотите проверить, и нажмите «Прослушиватели событий«, вы действительно сможете увидеть click событие и то, что произойдет, когда оно будет запущено.