Чтобы увидеть, для чего это может пригодиться, давайте рассмотрим следующий пример:

<html>

<head>

<script language='JavaScript'>window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) {

alert('Объект window перехватывает это событие!');

return true; // т. е. проследить ссылку

}

</script>

</head>

<body>

<a href='test.htm'>'Кликните' по этой ссылке.</a>

</body>

</html>

Как видно, мы не указываем программы обработки событий в тэге <a>. Вместо этого мы пишем

window.captureEvents(Event.CLICK);

с тем, чтобы перехватить событие Click объектом window. Обычно объект window не работает с событием Click. Однако, перехватив, мы затем его переадресуем в объект window.

Заметим, что в Event.CLICK фрагмент CLICK должен писаться заглавными буквами. Если же Вы хотите перехватывать несколько событий, то Вам следует отделить их друг от друга символами |. Например:

window.captureEvents(Event.CLICK | Event.MOVE);

Помимо этого в функции handle(), назначенной нами на роль обработчика событий, мы пользуемся инструкцией return true;. В действительности это означает, что браузер должен обработать и саму ссылку, после того, как завершится выполнение функции handle(). Если же Вы напишете вместо этого return false;, то на этом все и закончится.

Если теперь в тэге <a> Вы зададите программу обработки события onClick, то поймете, что данная программа при возникновении данного события вызвана уже не будет. И это не удивительно, поскольку объект window перехватывает сигнал о событии еще до того, как он достигает объекта link. Если же Вы определите функцию handle() как

function handle(e) {

alert('Объект window перехватывает это событие!');

window.routeEvent(e);

return true;

}

то компьютер будет проверять, определены ли другие программы обработки событий для данного объекта. Переменная e — это наш объект Event, передаваемый функции обработки событий в виде аргумента.

Кроме того, Вы можете непосредственно послать сигнал о событии какому-либо объекту. Для этого Вы можете воспользоваться методом handleEvent(). Это выглядит следующим образом:

<html>

<script language='JavaScript'>

window.captureEvents(Event.CLICK);

window.onclick= handle;

function handle(e) {

document.links[1].handleEvent(e);

}

</script>

<a href='test.htm'>'Кликните' по этой ссылке</a><br>

<a href='test.htm'

onClick='alert('Обработчик событий для второй ссылки!);'>Вторая ссылка</a>

</html>

Все сигналы о событиях Click, посылаются на обработку по второй ссылке — даже если Вы вовсе и не щелкнули ни по одной из ссылок!

Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт.

<html>

<script language='JavaScript'>

window.captureEvents(Event.KEYPRESS);

window.onkeypress= pressed;

function pressed(e) {

alert('Key pressed! ASCII-value: ' + e.which);

}

</script>

</html>

Часть 12: Drag & Drop

Что такое drag & drop?

С помощью новой модели событий в языке JavaScript, 1.2 и механизма слоев мы можем реализовать на нашей web-странице схему drag & drop ('перетащил и оставил'). Для этого Вам понадобится по крайней мере Netscape Navigator 4.0, поскольку мы будем пользоваться особенностями языка JavaScript 1.2.

Что такое drag & drop? Например, некоторые операционные системы (такие как Win95/NT или MacOS) позволяют Вам стирать файлы, просто перетаскивая их в мусорную карзину. Иными словами, Вы щелкаете клавишей мыши над изображением файла, перетаскиваете его (то есть держите клавишу нажатой и просто двигаете мышь) — drag — в мусорную карзину, а затем отпускаете — drop — его там.

Механизм drag & drop, который мы хотим здесь реализовать, ограничивается web-страницей. Поэтому Вы не можете использовать представленный здесь код, чтобы переносить объекты с HTML-страницы на жесткий диск вашего компьютера или другие подобные действия. (Начиная с версии 4.0 браузера Netscape Navigator ваш скрипт может реагировать на событие с названием DragDrop, событие, когда кто-либо перетаскивает файл на окно вашего браузера. Но это не совсем то, о чем мы здесь хотим поговорить)

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

Также можно рассмотреть пример, предоставленный компанией Netscape. Найти его Вы сможете по адресу: http://home.netscape.com/comprod/products/communicator/user_age

Добавить отзыв
ВСЕ ОТЗЫВЫ О КНИГЕ В ИЗБРАННОЕ

2

Вы можете отметить интересные вам фрагменты текста, которые будут доступны по уникальной ссылке в адресной строке браузера.

Отметить Добавить цитату