Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Ключевое слово this

Зачастую обработчику события необходимо передать ссылку на элемент, который это событие вызвал. Это осуществляется с помощью указателя this. Пример приведен ниже:

<a href="pr3.htm" onclick="show(this);"> click me</a>

function show(_obj) {

alert(_obj.innerHTML);

//нажатие на ссылку выводит в диалоговое окно «click me»

}

</script>

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

click me</a>

function showInfo(_obj) {

return confirm("Do you want go to another page?");

/*при нажатии на ссылку будет выведен стандартный диалог с кнопками OK и Cancel; если будет нажата Cancel, то браузер не перейдет по адресу, на который указывает ссылка*/

}

</script>

Модель событий JavaScript 1.2.

В JavaScript 1.2 введена новая модель событий:

Abort, Blur, Click, Change, Focus, DblClick, DragDrop, Error KeyDown, KeyPress, KeyUp, Load, MouseDown, MouseMove, MouseOut, MouseOver, MouseUp,Move Reset, Resize, Select, Submit, Unload.

Объект Event.

В язык JavaScript 1.2 добавлен новый объект Event. Он содержит свойства, описывающие событие. Каждый раз, когда происходит какое-либо событие, объект Event передается соответствующей программе обработки. Ниже обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:

<html>

<head>

function whichButton(event)

{

if (event.button == 2)

{

alert("Вы щелкнули правой кнопкой мыши!");

}

else

{

alert("Вы щелкнули левой кнопкой мыши!");

}

</script>

</head>

<p>Щелкните любой кнопкой мыши в любом месте документа</p>

</body>

</html>

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

<layer>

<a href="#" onClick="alert('x:'+event.x+'y:'+event.y);

return false;">

</layer>

В тэг <a> мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.

К тому все команды помещены в тэг <layer>. Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т.е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера. (инструкция return false; используется здесь для того, чтобы браузер обрабатывал далее данную ссылку)

Объект Event получил следующие свойства:

Data - Массив адресов URL оставленных объектов, при событии DragDrop.

LayerX - Горизонтальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет ширину окна браузера.

LayerY - Вертикальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет высоту окна браузера.

modifiers - Строка, задающая ключи модификатора - ALT_MASK, CONTROL_MASK, META_MASK or SHIFT_MASK

pageX - Горизонтальное положение курсора (в пикселах) относительно окна браузера.

pageY - Вертикальное положение курсора (в пикселах) относительно окна браузера.

screenX- Горизонтальное положение курсора (в пикселах) относительно экрана.

screenY - Вертикальное положение курсора (в пикселах) относительно экрана.

target - Строка, представляющая объект, которому исходно было послано событие.

type - Строка, указывающая тип события.

which - ASCII-значение нажатой клавиши или номер клавиши мыши.

x - Синоним layerX.

y - Синоним layerY.

Содержание