Обычно событие обрабатывается объектом, в котором это событие возникает. Например, если пользователь щёлкает по кнопке, вызывается обработчик этого события. Иногда Вам может понадобиться, чтобы объект window или document обрабатывал определённые события. Например, Вам может понадобиться, чтобы объект document обрабатывал все события MouseDown вне зависимости от того, в каком месте документа они возникают.
Модель захвата событий JavaScript даёт возможность определять методы, которые захватывают и обрабатывают события, до того как они достигнут своей предполагаемой цели. Для этого объекты window, document и layer используют следующие методы:
captureEvents – захватывает события специфицированного типа.
releaseEvents – игнорирует захват событий специфицированного типа.
Для настройки захвата окном всех событий Click используйте примерно такой оператор:
window.captureEvents(Event.CLICK);
Аргументом свойства captureEvents объекта event является тип захватываемого события. Для захвата нескольких типов событий, аргументом является список с разделением символом (|). Например, следующий оператор захватывает события Click, MouseDown и MouseUp:
ПРИМЕЧАНИЕ: Если окно с фрэймами должно захватывать события на страницах, загружаемых с различных серверов, Вам необходимо использовать captureEvents в маркированном скрипте и вызывать enableExternalCapture. О маркированных скриптах см. Главу 14 Безопасность в JavaScript.
2. Определение обработчика события
Далее определяется функция, обрабатывающая событие. Аргумент e это event-объект события.
function clickHandler(e) {
//Здесь идёт обработка события.
//Процесс описан ниже.
}
У Вас имеются следующие опции для обработки события:
Возвращать true. В гиперссылке выполняется переход, и никакой обработчик не отмечается. Если событие не может быть отменено, это прекращает обработку данного события.
function clickHandler(e) {
return true;
}
Это даёт возможность полностью обработать событие документом или окном. Событие не обрабатывается каким-либо иным объектом, таким как button в document или дочерний фрэйм в window.
Возвращать false. В гиперссылке – переход по ссылке не выполняется. Если событие не может быть отменено, это прекращает обработку данного события.
function clickHandler(e) {
return false;
}
Это позволяет подавить обработку событий данного типа. Событие не обрабатывается каким-либо другим объектом, таким как кнопка в документе или дочерний фрэйм в окне. Вы может использовать это, например, для подавления событий от правой кнопки мыши в Вашем приложении.
Вызывать routeEvent. JavaScript ищет другие обработчики для данного события. Если другой объект пытается захватить событие (такой объект как document), JavaScript вызывает его обработчик события. Если другой объект не пытается захватить событие, JavaScript ищет изначальный целевой обработчик объекта (такого как объект button). Функция routeEvent возвращает значение, возвращаемое обработчиком события. Захватывающий объект может определить способ продолжения работы на основе возвращённого результата.
Если routeEvent вызывает обработчик события, этот обработчик активируется. Если routeEvent вызывает обработчик, функцией которого является отображение новой страницы, эта акция выполняется без возвращения к вызывающему объекту.
function clickHandler(e) {
var retval = routeEvent(e);
if (retval == false) return false;
else return true;
}
Вызвать метод handleEvent получателя события. Любой объект, который может регистрировать обработчики событий, является получателем события/event receiver. Это метод явным образом вызывает обработчик получателя события в обход иерархии захвата. Например, если Вы хотите, чтобы все события Click направлялись первой гиперссылке страницы, Вы можете записать:
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
Пока ссылка имеет обработчик onClick, эта ссылка будет обрабатывать любые click-события, которые она получает.
3. Регистрация обработчика события
Наконец, функция регистрируется как обработчик данного события в окне:
window.onClick = clickHandler;
4. Полный пример
В этом примере window и document захватывают и освобождают события:
<HTML>
<SCRIPT>
function fun1(e) {
alert ("The window got an event of type: " + e.type +
" and will call routeEvent.");
window.routeEvent(e);
alert ("The window returned from routeEvent.");
return true;
}
function fun2(e) {
alert ("The document got an event of type: " + e.type);
return false;
}
function setWindowCapture() {
window.captureEvents(Event.CLICK);
}
function releaseWindowCapture() {
window.releaseEvents(Event.CLICK);
}
function setDocCapture() {
document.captureEvents(Event.CLICK);
}
function releaseDocCapture() {
document.releaseEvents(Event.CLICK);
}
window.onclick=fun1;
document.onclick=fun2;
</SCRIPT>
...
</HTML>