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

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

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

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

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

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

Здесь мы рассмотрим основные «клавиатурные» события и работу с ними.

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

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

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

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

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

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

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

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

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

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

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

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

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

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