Wiki-учебник по веб-технологиям: JavaScript/ЗахватСобытий ...

Главная | |

Захват событий

Оглавление документа

Обычно событие обрабатывается объектом, в котором это событие возникает. Например, если пользователь щёлкает по кнопке, вызывается обработчик этого события. Иногда Вам может понадобиться, чтобы объект window или document обрабатывал определённые события. Например, Вам может понадобиться, чтобы объект document обрабатывал все события MouseDown вне зависимости от того, в каком месте документа они возникают.

Модель захвата событий JavaScript даёт возможность определять методы, которые захватывают и обрабатывают события, до того как они достигнут своей предполагаемой цели. Для этого объекты window, document и layer используют следующие методы:

JavaScript 1.1 и предыдущие версии. Захват событий невозможен.

Как пример, предположим, Вы хотите захватить все события Click, возникающие в окне. В сжатом виде, шаги по захвату событий таковы:
  1. Включить захват событий
  2. Определить обработчик события
  3. Зарегистрировать обработчик события

В последующих разделах эти шаги поясняются.


1. Включение захвата событий

Для настройки захвата окном всех событий Click используйте примерно такой оператор:

window.captureEvents(Event.CLICK);


Аргументом свойства captureEvents объекта event является тип захватываемого события. Для захвата нескольких типов событий, аргументом является список с разделением символом (|). Например, следующий оператор захватывает события Click, MouseDown и MouseUp:

window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)


ПРИМЕЧАНИЕ: Если окно с фрэймами должно захватывать события на страницах, загружаемых с различных серверов, Вам необходимо использовать captureEvents в маркированном скрипте и вызывать enableExternalCapture. О маркированных скриптах см. Главу 14 Безопасность в JavaScript.


2. Определение обработчика события

Далее определяется функция, обрабатывающая событие. Аргумент e это event-объект события.

function clickHandler(e) {
 
   //Здесь идёт обработка события.
   //Процесс описан ниже.
}


У Вас имеются следующие опции для обработки события:


function clickHandler(e) {
      return true;
   }


Это даёт возможность полностью обработать событие документом или окном. Событие не обрабатывается каким-либо иным объектом, таким как button в document или дочерний фрэйм в window.

function clickHandler(e) {
      return false;
   }


Это позволяет подавить обработку событий данного типа. Событие не обрабатывается каким-либо другим объектом, таким как кнопка в документе или дочерний фрэйм в окне. Вы может использовать это, например, для подавления событий от правой кнопки мыши в Вашем приложении.
Если routeEvent вызывает обработчик события, этот обработчик активируется. Если routeEvent вызывает обработчик, функцией которого является отображение новой страницы, эта акция выполняется без возвращения к вызывающему объекту.

function clickHandler(e) {
      var retval = routeEvent(e);
      if (retval == false) return false;
      else return true;
   }



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>