Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
8 Мб
Скачать
☆

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

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

<DOCTYPE html>

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

<!-- пример pr16: -->

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

<script type="text/javascript">

function show(_obj) {

alert(_obj.innerHTML);

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

}

</script>

</body> </html>

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

<a href="sample.html" onclick="return showInfo(this);">click me</a>

<script type="text/javascript">

function showInfo(_obj) {

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

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

}

</script>

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

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

Ниже обрабатывается событие нажатия кнопки мыши, и определяется, какая именно из них была нажата:

<html><head>

<title>pr17-Test of Event</title>

<script >

function whichButton(event)

{if (event.button == 2)

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

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

}

</script>

</head>

<body onmousedown="whichButton(event)">

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

</body>

</html>

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

<html><head>

<title>pr18-Test of Event</title>

</head>

<body >

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

<img src="avtor.jpg" width=249 height=264 border=0></a>

</body> </html>

Здесь используются свойства объекта Event event.x и event.y, чтобы узнать координаты мыши. Инструкция return false; используется здесь для того, чтобы браузер обрабатывал далее данную ссылку.

Объект Event имеет свойства:

currentTarget идентифицирует текущий элемент, в котором в данный момент обрабатывается событие. data - содержит данные для обработчика событий; LayerX/LayerY - горизонтальное/ вертикальное положение курсора относительно слоя. Синоним x, y.

pageX / pageY- Горизонтальное/ Вертикальное положение курсора (в пикселах) относительно окна браузера. screenX/ screenY - горизонтальное/ вертикальное положение курсора относительно экрана. target – идентифицирует DOM элемент, инициировавший событие (узел, в котором произошло событие ). timeStamp содержит число миллисекунд с 1 января 1970 года до момента срабатывания события. result содержит последнее возвращенное обработчиком события значение; type - тип события; which - значение нажатой клавиши или клавиши мыши. Методы объекта Event: isDefaultPrevented()-позволяет определить, был ли вызван метод preventDefault(); event. isImmediatePropagationStopped() - позволяет определить, был ли вызван метод event.stopImmediatePropagation(); isPropagationStopped() -позволяет определить, был ли вызван метод stopPropagation(); preventDefault()- отменяет семантическое действие по умолчанию для события; stopImmediatePropagation()-предотвращает всплытие объекта события вверх по DOM-дереву и запуск последующих обработчиков события, связанных с текущим элементом.