freeCodeCamp/guide/russian/jquery/jquery-click-method/index.md

4.5 KiB
Raw Blame History

title localeTitle
Click Method Метод Click

Метод Click

Метод jQuery Click запускает функцию при нажатии элемента. Эта функция известна как «обработчик», потому что она обрабатывает событие click. Функции могут влияют на элемент HTML, привязанный к клику, используя метод jQuery Click, или они могут полностью изменить что-то еще. Наиболее часто используемая форма:

$("#clickMe").click(handler) 

Метод click использует функцию обработчика в качестве аргумента и выполняет его каждый раз, когда #clickMe элемент #clickMe . Функция обработчика получает параметр, известный как eventObject, который может быть полезен для управления действием.

Примеры

Этот код показывает предупреждение, когда пользователь нажимает кнопку:


<button id="alert">Click Here</button> 
$("#alert").click(function () { 
  alert("Hi! I'm an alert"); 
 }); 

jsFiddle

EventObject имеет некоторые встроенные методы, в том числе preventDefault() , который делает именно то, что он говорит, - останавливается событие по умолчанию для элемента. Здесь мы помещаем якорный тег в качестве ссылки:


<a id="myLink" href="www.google.com">Link to Google</a> 
$("#myLink").click(function (event) { 
  event.preventDefault(); 
 }); 

jsFiddle

Дополнительные способы воспроизведения с помощью метода click

Функция обработчика также может принимать дополнительные данные в виде объекта:

jqueryElement.click(usefulInfo, handler) 

Данные могут быть любого типа.

$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){ 
    alert(event.data.firstWord); 
    alert(event.data.secondWord); 
 }); 

Вызов метода click без функции обработчика запускает событие click:

$("#alert").click(function () { 
  alert("Hi! I'm an alert"); 
 }); 
 
 $("#alert").click(); 

Теперь, всякий раз, когда страница загружается, событие click будет срабатывать, когда мы вводим или перезагружаем страницу и показываем назначенное предупреждение.

Также вы должны использовать .on ('click', ...) над .click (...), потому что первый может использовать меньше памяти и работать для динамически добавленных элементов.

jsFiddle

Распространенные ошибки

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

Например, этот пример метода click:

$( "element" ).click(function() { 
  alert("I've been clicked!"); 
 }); 

Можно изменить это на примере метода:

$( document ).on("click", "element", function() { 
  alert("I've been clicked!"); 
 }); 

Дополнительная информация:

Для получения дополнительной информации посетите официальный сайт .