Мастер-классы по Javascript Екатеринбург Ростов-на-Дону Москва Узнать больше...
Содержание (скрыть) Содержание (показать)

События и интерфейсы

Основы Drag'n'Drop

  1. HTML5 Drag’n’Drop
  2. Основная логика Drag’n’Drop
  3. Отмена переноса браузера
  4. mousemove на document
  5. Правильное позиционирование
  6. Итого

Drag’n’Drop — это возможность захватить мышью элемент и перенести его. В свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.

Одно из самых очевидных применений Drag’n’Drop - переупорядочение данных. Это могут быть блоки, элементы списка, и вообще - любые DOM-элементы и их наборы.

Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag’n’Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.

Drag'n'Drop объектов

  1. Документ
  2. Начало переноса
  3. Перенос элемента
  4. Сводим части фреймворка вместе
  5. Варианты дополнительных задач
  6. Итого

В предыдущей статье мы рассмотрели основы Drag’n’Drop. Здесь мы построим на этой основе фреймворк, предназначенный для переноса объектов — элементов списка, узлов дерева и т.п.

Почти все javascript-библиотеки реализуют Drag’n’Drop так, как написано (или хуже Wink). Зная, что и как, вы сможете легко написать свой код переноса или поправить, адаптировать существующую библиотеку под себя.

Поток выполнения, вложенные события

  1. Главный поток JavaScript
  2. Главный цикл
  3. Использование setTimeout(func, 0)
  4. Вложенные (синхронные) события
  5. Блокировка потока, синхронные вызовы
  6. Итого

Внутри браузеры построены на событиях.

Большинство действий — загрузка файла, клик посетителя и другие, создают событие, которое добавляется в очередь. Когда это возможно, браузер берёт событие из очереди и обрабатывает его. Многие, хотя и не все события доступны из JavaScript.

Событие "onscroll"

Событие происходит, когда элемент прокручивается. Его могут генерировать только прокручиваемые элементы.

При прокрутке окна срабатывает событие window.onscroll.

События "onload", "onbeforeunload" и "onerror"

  1. Загрузка SCRIPT
  2. Обработчики на window
  3. Обработчики на IMG, IFRAME, LINK
  4. Итого

Браузер позволяет отслеживать загрузку внешних ресурсов — скриптов, ифреймов, картинок и других.

Для этого есть два события:

  • onload — если загрузка успешна.
  • onerror — если при загрузке произошла ошибка.

Кроме того, обработчик window.onerror вызывается при ошибках JavaScript, которые не были пойманы try..catch.

Событие загрузки документа "onDOMContentLoaded"

  1. Тонкости DOMContentLoaded
    1. DOMContentLoaded и скрипты
    2. DOMContentLoaded и стили
    3. Автозаполнение
  2. IE до 9

Событие onDOMContentLoaded срабатывает при загрузке документа, после выполнения всех тегов SCRIPT.

В отличие от window.onload, оно не ждёт загрузки дополнительных ресурсов, поэтому наступает гораздо раньше.

На момент наступления onDOMContentLoaded, дерево DOM полностью построено и все элементы доступны. Поэтому это событие часто используют для инициализации интерфейса. Во фреймворках для него отводят специальные функции: $(ready), Ext.onReady и т.п.

Но, как мы увидим, у него есть ряд важных особенностей, которые делают такое применение не лучшим выбором.

JS-Анимация

  1. Основы анимации
  2. Структура анимации
  3. Временная функция delta
  4. Реверсивные функции (easeIn, easeOut, easeInOut)
  5. Сложные варианты step
  6. Итого

В этой главе мы рассмотрим устройство браузерной анимации. Она примерно одинаково реализована во всех фреймворках.

Понимание этого позволит разобраться в происходящем, если что-то вдруг не работает, а также написать сложную анимацию самому.

CSS-анимация

  1. Анимация свойства
    1. Пример
  2. Полный синтаксис CSS
    1. Пример
  3. Временная функция
  4. CSS-преобразования
  5. Событие transitionend
  6. Ограничения и достоинства CSS-анимаций

Все современные браузеры, кроме IE<10 поддерживают CSS transitions, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Большинство примеров из этой статьи не будут работать в IE<10.


Комментарии

  1. Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  2. Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
  3. Комментарии без смысла, с рекламой или не о статье вообще - удаляются.
Наверх

Содержание

Реклама

Нашли опечатку?

Нашли опечатку на сайте? Что-то кажется странным?
Выделите соответствующий текст и нажмите Ctrl+Enter!

Последние Комментарии

Помоги другим!

Помоги другим узнать о хорошей статье!