|
|
@@ -0,0 +1,153 @@
|
|
|
+# jQuery 2
|
|
|
+
|
|
|
+## События. Delegated events, `on`, `trigger`, propagation.
|
|
|
+
|
|
|
+При динамическом (используя **DOM** `createElement` или `$("<tag>")`) создании элементов возникает следующая проблема - обработчики
|
|
|
+событий, назначенные *до* создания элемента какой-то группе элементов по селектору **не** работают для новосозданных элементов.
|
|
|
+
|
|
|
+**Рассмотрим пример:**
|
|
|
+
|
|
|
+```html
|
|
|
+ <body>
|
|
|
+ <button>first button</button>
|
|
|
+
|
|
|
+ </body>
|
|
|
+```
|
|
|
+
|
|
|
+```javascript
|
|
|
+$(document).ready(function(){
|
|
|
+ $("button").click(function(){
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+ var otherButton = $("<button>");
|
|
|
+ otherButton.html("second button");
|
|
|
+ $(document.body).append(otherButton);
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+В примере выше мы создаем обработчик для *всех* кнопок. На момент назначения обработчика кнопка существует только одна. Далее динамически создается
|
|
|
+еще одна кнопка `otherButton` с текстом `second button` и добавляется в `body`. Этой кнопке обработчик `click` *не* назначен, так как её *не существовало*
|
|
|
+на момент назначения.
|
|
|
+
|
|
|
+https://repl.it/E8Fc/0
|
|
|
+
|
|
|
+### Delegated events, `on`.
|
|
|
+
|
|
|
+#### `on`
|
|
|
+
|
|
|
+Практически все события типа `click`, `keydown` являются сокращениями для `on`. Например `click` из примера выше аналогичен следующему коду:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $("button").on("click",function(){
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+#### Делегированные события
|
|
|
+
|
|
|
+Для назначения событий и для будущих элементов (такие события называются **Delegated events**) используется `on` для родительского элемента с указанием
|
|
|
+селектора дочерних элементов. После этого добавления дочерних элементов отслеживается и обработчики работают и для новых элементов:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $(document.body).on("click", "button", function(){
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+Вместо назначения обработчика `click` для всех элементов `button` выше мы указываем в каком элементе (`document.body`) для каких дочерних элементов
|
|
|
+(`"button"`) назначить обработчик события `"click"` *отныне и навсегда*, т. е. создать делегированное событие.
|
|
|
+
|
|
|
+https://repl.it/E8Fc/1
|
|
|
+
|
|
|
+### Инициируем событие, `trigger`
|
|
|
+
|
|
|
+На каждое событие может быть назначено *более одного* обработчика:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $(document.body).on("click", "button", function(){
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+ $(document.body).on("click", "button", function(){
|
|
|
+ alert("click 2");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+В таком случае срабатывают оба обработчика *в порядке определения*.
|
|
|
+
|
|
|
+Для запуска обработчиков события используйте `trigger`:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $("button").trigger("click");
|
|
|
+```
|
|
|
+
|
|
|
+Таким образом можете имитировать любые события, или запустить сложную цепочку обработчиков, если она не выделена у вас в отдельную функцию. Так же
|
|
|
+это полезный прием для автоматизации чужих сайтов, если применить это, например, с **TamperMonkey**.
|
|
|
+
|
|
|
+https://repl.it/E8Fc/4
|
|
|
+
|
|
|
+### Управление обработкой события
|
|
|
+
|
|
|
+Можно назначать события элементам, вложенным друг в друга, например `click` кнопке и элементу, в котором кнопка находится:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $(document.body).on("click", function(){
|
|
|
+ alert("body click");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+Обратите внимание, что тут создается *обычное*, а не *делегированное* событие, так как второй параметр - не селектор вложенных элементов, а
|
|
|
+обработчик события. Так работает `on`. При клике на кнопку так же происходит клик на элемент `body`, в котором эта кнопка находится. Это называется
|
|
|
+**всплытием события**. Подобное поведение не всегда нужно, рассмотрим функции, с помощью которых мы можем изменить эту логику.
|
|
|
+
|
|
|
+https://repl.it/E8Fc/5
|
|
|
+
|
|
|
+#### `stopPropagation`
|
|
|
+
|
|
|
+Это функция-метод объекта события, который передается в качестве первого параметра в обработчик события. Используя его вы можете прервать всплытие события:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $(document.body).on("click", "button", function(evt){
|
|
|
+ evt.stopPropagation();
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+После `stopPropagation()` событие *не* будет инициировано и обработано в вышележащих элементах (`body` в нашем примере)
|
|
|
+
|
|
|
+https://repl.it/E8Fc/6
|
|
|
+
|
|
|
+#### `stopImmediatePropagation`
|
|
|
+
|
|
|
+Работает так же, однако прерывает обработку не только событий в вышележащих элементах, но и в следующих обработчиках *этого* элемента:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ $(document.body).on("click", "button", function(evt){
|
|
|
+ evt.stopImmediatePropagation();
|
|
|
+ alert("click");
|
|
|
+ });
|
|
|
+```
|
|
|
+
|
|
|
+https://repl.it/E8Fc/7
|
|
|
+
|
|
|
+
|
|
|
+#### `preventDefault`
|
|
|
+
|
|
|
+#### `false`
|
|
|
+
|
|
|
+
|
|
|
+## jQuery UI
|
|
|
+
|
|
|
+### Что это, зачем и как подключить
|
|
|
+
|
|
|
+### jQuery UI как стандарт реализации API плагинов jQuery
|
|
|
+
|
|
|
+#### Инициализация
|
|
|
+
|
|
|
+#### Методы
|
|
|
+
|
|
|
+## Chaining
|
|
|
+
|
|
|
+## AJAX/AJAJ
|
|
|
+
|
|
|
+### GET и POST
|
|
|
+
|
me@helium