JavaScript — хорошо известный язык программирования. Он используется более чем на 95% веб-сайтов, с которыми мы взаимодействуем ежедневно. Часто можно увидеть, что при нажатии кнопки изменяется вся страница, открывается поле формы или появляется всплывающее окно. С точки зрения программиста/разработчика, как мы можем реализовать такую функциональность и управлять взаимодействием веб-сайта с пользователями? Когда дело доходит до взаимодействия, JavaScript предоставляет встроенные функции для управления событиями на сайте.
В JavaScript есть два типа событий:
- Event Listener — слушает и ждет, пока событие не будет запущено
- Event Handler — выполняется, когда событие запускается
В этой статье вы узнаете о наиболее часто используемом обработчике событий JavaScript — событии onClick. Существуют и другие обработчики событий для наведения курсора на элемент или нажатия клавиш клавиатуры, но в этой статье мы сосредоточимся на событии onClick.
Событие onClick используется для выполнения определенных задач одним нажатием кнопки или путем взаимодействия с элементом HTML.
Теперь мы покажем вам пример, чтобы продемонстрировать, как работает событие onClick.
Пример: изменение текста с помощью onClick
В этом примере мы изменим выделение текста одним нажатием кнопки с помощью события onClick. Сначала мы создадим тег абзаца и дадим ему идентификатор абзаца для доступа к нему позже. Мы создадим кнопку с событием onClick и вызовем функцию с именем «Изменить».
В файле сценария мы создадим переменную флага, которая позволит нам проверять статус текста в нашем теге абзаца HTML. Затем мы напишем функцию, определяющую функцию «изменения». В определении функции мы создадим оператор «if», в котором мы будем проверять статус с помощью переменной flag. Мы также изменим текст и поменяем флаг. Это довольно простой фрагмент кода!
<>
var a = 1;
function change(){
if (a==1) {
document.getElementById(«paragraph»).innerHTML = «AndreyEx крут»
a = 0;
} else {
document.getElementById(«paragraph»).innerHTML = «AndreyEx»
a = 1;
}
}
</>
Все! После написания всего этого кода мы запустим код, перейдем в наш браузер и нажмем только что созданную кнопку. После нажатия кнопки текст должен быть изменен с «AndreyEx» на «AndreyEx крут».
Мы можем применить ту же технику в любом месте, чтобы изменить содержание нашего веб-сайта в соответствии с нашими потребностями. Мы можем использовать его для изменения изображения или выполнения любых задач, которые мы можем себе представить с помощью этого инструмента.
Вывод
В этой статье объясняется, как использовать событие onClick. В этой статье вы познакомились с концепцией функции onClick на практике. Использование события onClick настолько простое, что даже новичок может начать работать с этой функцией. Вы можете продолжить обучение, работать и получить больше опыта в JavaScript на сайте AndreyEx.com, чтобы лучше понять этот язык программирования. Спасибо огромное!