Обработка событий - еще одна серьезная причина использовать jQuery. Существуют некоторые кроссбраузерные различия в том, как это делать, что jQuery нормализует в один простой API, в то же время применяя некоторые передовые практики.
По сути, вам нужно знать один метод: .on()- он работает следующим образом:
$("button").on("click", function() ( // do something ));Здесь мы даем .on()методу всего два параметра. Имя события («щелчок») и функция, запускаемая, когда это событие происходит с любым из элементов в этом выборе. Читается довольно чисто, правда?
Люди с некоторым предыдущим опытом JQuery могут быть знакомы с другими способами связывания нравятся .bind(), .live()или .delegate(). Не беспокойтесь об этом больше, современный jQuery объединил их все, .on()что всегда дает наилучшие результаты.
При привязке события, как мы делали выше, вы можете (и обычно разумно) включить имя параметра в функцию. Этот параметр будет «объектом события» внутри функции:
$("button").on("click", function(event) ( // event => "the event object" ));Через этот объект события вы получаете много информации. Вы уже немного знакомы с ним, потому что мы использовали его .preventDefault()и .stopPropagation(). Но в этом объекте есть также много другой прямой информации. Такие вещи, как тип события (в случае, если несколько событий запускают одну и ту же функцию), когда это произошло, где это произошло (координаты, если применимо), в каком элементе оно произошло, и многое другое. При кодировании стоит регулярно проверять объект события.
Существует концепция делегирования событий, которая чрезвычайно важна при работе с событиями. Это очень умная современная передовая практика. Он включает в себя идею объема.
Традиционный подход к привязке событий похож на «найти все кнопки на странице и привязать к ним событие щелчка». Это, конечно, работает, но это:
- Не очень эффективно
- Хрупкий
Неэффективно, потому что вы немедленно заставляете JavaScript находить все эти элементы кнопок, тогда как при делегировании вы можете просто найти один элемент, который легче найти.
Хрупкое, потому что, если на страницу будет добавлено больше кнопок, они уже пропустили лодку на привязке и их нужно будет привязать заново.
С делегированием событий вы должны привязать это событие щелчка к элементу, который находится выше в дереве DOM, чем кнопки, которые содержат все из них. Может быть где-то, может быть documentсам. Когда вы привязываете событие щелчка к этому верхнему элементу, вы говорите ему, что вас по-прежнему интересуют только щелчки, которые произошли на кнопках. Затем, когда кнопка нажата, из-за природы всплытия событий, этот щелчок в конечном итоге сработает на верхнем элементе. Но объект события будет знать, произошло ли исходное нажатие кнопки или нет, и функция, которую вы настроили для этого события, либо сработает, либо не сработает, зная эту информацию.
В этом скринкасте мы демонстрируем это следующим образом:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));А теперь представьте, если бы мы добавили к этому еще одну . Нам не нужно повторно связывать какие-либо события, потому что событие по-прежнему успешно привязано к области действия, и события по-прежнему будут всплывать из недавно добавленного текстового поля. Это особенно полезно в средах веб-приложений, где вы регулярно добавляете новые элементы на страницу.
Еще одна хорошая вещь, которую нужно знать о привязке событий jQuery, заключается в том, что они не исключают друг друга. Если вы добавите еще один обработчик кликов к тому же самому элементу, у которого он уже есть, он просто добавит еще один. Вы не перезаписываете предыдущий. jQuery просто изящно справляется с этим для вас. Вы всегда можете отвязать их, если действительно хотите переопределить ранее привязанную функцию.
Если это одно и то же событие, стоит знать, что для того, чтобы отвязать конкретное одно из них, а не другое, вам потребуется пространство имен для событий. Это происходит при использовании точки в названии события, например click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), как мы не упоминали раньше, именно так вы отключаете события.
Есть много возможных событий DOM. Щелчок - это самый большой очевидный элемент, но есть двойной щелчок, ввод и отпускание мыши, нажатие и нажатие клавиш, определенные формы, такие как размытие и изменение, и многое другое. Если вас интересует полный список, вы можете получить такой.
Вы можете связать несколько событий одновременно следующим образом:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Есть некоторые обстоятельства, когда вы ждете, когда произойдет событие, но как только оно произойдет, вы больше не заботитесь о нем или явно не хотите запускать функцию, которую вы связали. В этом суть .one()функции. Стандартный вариант использования для этого - кнопка отправки формы (если вы работаете с Ajax или чем-то еще). Вы, вероятно, захотите по существу отключить эту кнопку отправки после того, как они ее нажали, пока вы не сможете обработать эту информацию и дать им соответствующий отзыв. Конечно, это не единственный вариант использования, но просто имейте это в виду. .one()== только один раз.