JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

// свойства funcs.length, на случай если одна из вызванных функций

// зарегистрирует дополнительные функции.

for(var і = 0; і < funcs.length; i++) funcs[і].call(document);

// Теперь можно установить флаг ready в значение true и забыть

// о зарегистрированных функциях

ready = true;

funcs = null;

}

// Зарегистрировать обработчик handler для всех ожидаемых событий

if (document.addEventListener) {

document.addEventListener("DOMContentLoaded", handler, false);

document.addEventListener("readystatechange", handler, false);

window.addEventListener("load", handler, false);

}

else if (document.attachEvent) {

document.attachEvent("onreadystatechange", handler);

window.attachEvent("onload”, handler);

}

// Вернуть функцию whenReady

return function whenReady(f) {

if (ready)

f.call(document); // Вызвать функцию, если документ готов

else

funcs.push(f); // Иначе добавить ее в очередь,

} // чтобы вызвать позже.

});

17.5. События мыши

С мышью связано довольно много событий. Все они перечислены в табл. 17.1. Все события мыши, кроме «mouseenter* и «mouseleave», всплывают. Для событий «click», возникающих в ссылках и кнопках отправки форм, предусматриваются действия по умолчанию, которые можно отменить. Теоретически имеется возможность отменить событие «contextmenu* и предотвратить появление контекстного меню, но некоторые броузеры имеют параметры настройки, которые делают это событие неотменяемым.

Объект, передаваемый обработчикам событий от мыши, имеет свойства

clientX

clientY

, определяющие координаты указателя относительно окна. Чтобы преобразовать их в координаты документа, к ним необходимо добавить позиции полос прокрутки окна (как показано в примере 15.8).

Свойства

altKey, ctrlKey, metaKey

shiftKey

определяют состояния различных клавиш-модификаторов, которые могли удерживаться в нажатом состоянии в момент события: с их помощью можно отличать простой щелчок от щелчка с нажатой клавишей

Shift

, например.

Свойство

button

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

Event

в четвертой части книги. Некоторые броузеры возбуждают событие «click» только в случае щелчка левой кнопкой. Поэтому, если потребуется обрабатывать щелчки другими кнопками, следует использовать события «mousedown» и «mouseup». Событие «contextmenu» обычно сигнализирует о том, что был выполнен щелчок правой кнопкой, но, как отмечалось выше, в обработчиках этого события не всегда бывает возможным предотвратить появление контекстного меню.

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

В примере 17.2 демонстрируется функция

drag,

которая при вызове из обработчика события «mousedown» позволяет пользователю буксировать мышью абсолютно позиционированные элементы документа. Функция drag работает с обеими моделями событий, DOM и IE.

Функция

drag

принимает два аргумента. Первый - буксируемый элемент. Это может быть элемент, в котором возникло событие «mousedown», и содержащий его элемент (например, можно дать пользователю возможность ухватить мышью элемент, который выглядит как заголовок окна, и буксировать содержащий его элемент, который выглядит как окно). Однако в любом случае это должен быть элемент документа, абсолютно позиционированный с помощью CSS-атрибута position. Второй аргумент - объект события, полученный с событием «mousedown». Ниже приводится простой пример использования функции

drag.

В нем определяется элемент

<img>,

который пользователь может двигать мышью при нажатой клавише Shift:

<img src=”draggable.gif"

style="position:absolute; left:100px; top:100px;"

onmousedown="if (event.shiftKey) drag(this, event);">

Функция

drag

преобразует координаты события «mousedown» в координаты документа, чтобы определить расстояние от указателя мыши до верхнего левого угла буксируемого элемента. При этом она использует вспомогательную функцию

getScrollOffsets

из примера 15.8. Затем функция

drag

регистрирует обработчики событий «mousemove» и «mouseup», которые последуют за событием «mousedown». Обработчик события «mousemove» отвечает за перемещение элемента документа, а обработчик события «mouseup» - за удаление себя и обработчика события «mousemove».