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

Вы определяете обработчик события (функцию или серию операторов JavaScript) для обработки события. Если событие применяется к HTML-тэгу (то есть событие применяется к JavaScript-объекту, созданному из этого тэга), то Вы можете определить для него обработчик события. Имя обработчика это имя события с префиксом "on." Например, обработчик для события focus называется onFocus.

Для создания обработчика события для тэга HTML добавьте атрибут обработчика события в этот тэг. Поместите код JavaScript в кавычки как значение атрибута. Общий синтаксис таков:

<TAG eventHandler="JavaScript Code">

где TAG это тэг HTML, eventHandler это имя обработчика события, а JavaScript Code это последовательность операторов JavaScript.

Например, Вы создали JavaScript-функцию compute. Вы выполняете вызов Navigator'ом этой функции, когда пользователь щёлкает кнопку, назначив вызов функции обработчику onClick кнопки:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

Вы можете указать любые операторы JavaScript в качестве значения атрибута onClick. Эти операторы выполняются, если пользователь щёлкает по кнопке. При включении нескольких операторов разделяйте их символом (;).

В предыдущем примере this.form ссылается на текущую форму. Ключевое слово this ссылается на текущий объект, которым в данном случае является кнопка. Конструкция this.form, следовательно, ссылается на форму, содержащую кнопку. Обработчик onClick это вызов функции compute с текущей формой в качестве аргумента.

Если Вы создаёте обработчик события, соответствующий объект JavaScript получает свойство с именем обработчика события. Это свойство даёт Вам доступ к обработчику события данного объекта. Например, в предыдущем примере JavaScript создаёт объект Button со свойством onclick, значением которого является "compute(this.form)".

Не забывайте чередовать двойные и одинарные кавычки. Поскольку обработчик события в HTML обязан быть заключён в кавычки, Вы обязаны использовать одинарные кавычки как ограничители строковых аргументов. Например:

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html', 'newWin')">

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

• это сделает Ваш код более модульным - Вы сможете использовать ту же самую функцию как обработчик события для различных элементов.

• это сделает Ваш код более понятным.



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



Далее определяется функция, обрабатывающая событие. Аргумент 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-события, которые она получает.



Содержание раздела



---







---