Функция OnClick в JQuery с примерами

Одной из самых быстрых, небольших и многофункциональных библиотек JavaScript является jQuery. jQuery используется для создания HTML-документов, обработки событий, обхода и манипулирования и т. д.

Всякий раз, когда нажимается элемент HTML, происходит событие jQuery click. Для запуска функции onclick в jQuery используется метод click(). Например, при нажатии на абзац в документе событие щелчка будет вызвано методом $("p").click(). Пользователь может прикрепить функцию к методу щелчка всякий раз, когда происходит событие щелчка для запуска функции. Таким образом, часть кода выполняется всякий раз, когда запускается событие click().

Щелчок мыши имитируется с помощью метода HTMLElement.click().

Функция Click() — это встроенная функция в jQuery, которая запускает событие клика. Всякий раз, когда на соответствующий элемент нажимают, событие вызывается методом click(). Затем это событие инициирует событие click для элементов, находящихся выше в дереве документа (или в цепочке событий).

Как следует из названия, это просто нажатие и отпускание пользователем кнопки мыши над элементом.

Один или несколько обработчиков событий прикрепляются к выбранным элементам с помощью метода on(). При нажатии на элемент происходит событие click(). Метод click() выполняется, как только происходит событие click(). Функция присоединяется к методу click() и выполняется. Метод click() используется с другими событиями jQuery.

Поэтому .click() привязывает обработчик события к событию JavaScript «щелчок» или запускает событие для элемента. Варианты метода onclick в JavaScript :

1. .click(обработчик).
2. .click([eventData], обработчик).
3. .клик().

Первый и второй варианты представляют собой короткую форму для .on("click", handler) и ярлык для .trigger("click") в последнем варианте.

Всякий раз, когда указатель мыши находится над элементом, а кнопка нажата и отпущена, событие click() отправляется этому элементу. Событие может быть получено любым элементом HTML.

Событие Click() также может быть запущено, если щелкнуть другой элемент с помощью следующего кода.

С этим кодом сообщение будет предупреждено элементом

Через следующие события запускается только событие click().

• Когда указатель мыши находится внутри элемента, а кнопка мыши нажата.
• Когда указатель мыши находится внутри элемента и кнопка мыши отпущена.

Прежде чем совершить действие, вышеперечисленные события обычно имеют желаемую последовательность. В противном случае другим подходящим событием является событие «нажатие мыши» или «наведение мыши».

Из-за того, что метод .click() является ярлыком для .on("click", обработчик), возможность отсоединения присутствует за счет использования .off("click").

Применение

Существует два способа вызова метода click():

• С заданным аргументом функции
• Без заданного аргумента

Функцию onclick в jQuery можно использовать в элементах HTML, таких как div, абзацы, гиперссылки и т. д., для выполнения желаемой задачи. Щелчок — это событие мыши, которое происходит при нажатии кнопки мыши. Однако событие произойдет, если указатель мыши находится внутри элемента.

Синтаксис:

$(селектор).клик() ; -> используется для запуска события щелчка для выбранных элементов.

$(селектор).щелчок(функция); -> используется для присоединения функции к событию клика.

• Необязательный используемый параметр — это «функция», которая используется для выполнения при возникновении события щелчка.
• Возвращаемое значение: возвращается выбранный элемент, указанный с функцией для выполнения.

Реализация метода click()

1. Когда задан аргумент функции

В этом типе реализации функция принимается в качестве входных данных и выполняется всякий раз, когда вызывается метод click().

• Написание кода происходит между тегом script и внутри HTML- тела кода.
• Вызов функции осуществляется как атрибут стиля h1.
• Аргумент объявляется вместе с функцией и воспринимается как функция отдельно.
• Переключение метода применяется к объекту с помощью этого оператора с задержкой 1000 мс.
• Ниже показан пример метода реализации с заданным аргументом функции.

Вывод кода будет «Нажмите на меня, чтобы переключить текст!»

2. Когда аргумент не указан

Метод JavaScript onclick запускает событие Элемент уже назначен методу. Поэтому элемент может вызывать событие onclick другого элемента отдельно. Этого можно достичь с помощью следующих шагов:

1. Сначала объект должен быть объявлен с атрибутом определенного стиля, который можно щелкнуть. Для объекта должно быть объявлено действие по клику.
2. В теле кода создается блок скрипта , в котором выполняется отнесение метода click() к формату другого стиля, p .
3. Метод h1 onclick, который уже определен, должен быть вызван внутри вызова функции.
4. Затем тот же метод onclick вызывается для атрибута.
5. Пример кода, показывающий реализацию метода click() без заданного аргумента, показан ниже.

Вывод кода: «Нажатие на меня вызовет предупреждение!».

• • В методе $.on можно использовать множество событий, таких как dblclick, change и другие.

3. Отрисовка HTML-кнопки и добавление текста на страницу при нажатии кнопки. Метод Click() чаще всего прикрепляется к кнопке, однако его можно прикрепить к любым другим элементам веб-страницы.

• • Базовая кнопка отображается с идентификатором «btn-primary», который находится внутри <div> с идентификатором «main.
  • Через код новый контент должен отображаться с классом «нового контента» в теге <p> после нажатия кнопки.
  • jQuery заключен в теги <script>.

• • Метод click() прикрепляется к идентификатору кнопки, а аргумент принимается в качестве функции обратного вызова, которая является анонимной функцией.
  • Строка «Кнопка нажата» возвращается функцией обратного вызова.

• • Функция без имени просто называется анонимной функцией и используется в качестве обратных вызовов в качестве аргументов метода. Краеугольным камнем для создания любых адаптивных веб-сайтов и приложений являются анонимные функции и методы обратного вызова.

• • Код начнется с кнопки внутри <div> «main».
  • После нажатия кнопки функция обратного вызова будет вызвана обработчиком событий, так как метод click() прикреплен к селектору кнопки.
  • Отобразится строка «Кнопка нажата».
  • Приведенный выше код будет отображать содержимое только один раз, однако для отображения строки каждый раз, когда код щелкается, вместо HTML() используется append().

• • Он трижды создаст строку в качестве нового содержимого внутри тега <p>.
  • Функция обратного вызова вызывается каждый раз при нажатии кнопки.

Заключение

Функционирование функции onclick в jquery обсуждалось в статье вместе с ее использованием и примерами. С помощью всего нескольких строк кода функциональность веб-страницы может быть создана с помощью метода JavaScript onclick .

Если у вас есть желание узнать больше о веб-разработке и специализироваться в других смежных областях, вы можете проверить курс « Магистр наук в области компьютерных наук », предлагаемый upGrad . Специально разработанный для профессионалов начального уровня (как мужчин, так и женщин в возрасте от 21 до 45 лет), курс будет проходить на онлайн-платформе с живыми сеансами для удобства пассажиров, путешествующих на большие расстояния. Имея более 30+ проектов и заданий, студент получит статус выпускника IIIT-Bangalore и LJMU . Не стесняйтесь обращаться к нашей команде за любой помощью.