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

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

<DOCTYPE html>

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

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

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

<script type="text/javascript">

function show(_obj) {

alert(_obj.innerHTML);

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

}

</script>

После нажатия на ссылку происходит переход на другую страницу.

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

<a href="pr3.htm" 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, то браузер не перейдет по адресу pr3.htm*/

}

</script>

</body> </html>

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

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

<html><head>

<title>prjs17-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.x и event.y, чтобы узнать координаты мыши. Инструкция return false; используется, чтобы браузер обрабатывал далее данную ссылку, а не переходил на новую. Отметим, что FireFox координаты выдает неправильно!

Объект Event имеет свойства: currentTarget- идентифицирует теку­щий элемент, в котором обрабатывается событие. data - содержит данные для обработчика; LayerX/LayerY(синоним x, y) - горизонтальное/ вертикальное положение курсора относительно слоя. pageX / pageY- Гори­зонтальное/ Вертикальное положение курсора (в пикселах) относительно окна браузера. screenX/ screenY - горизонтальное/ вертикальное положе­ние курсора относительно экрана. target – идентифицирует элемент, инициировавший событие. timeStamp содержит число миллисекунд с 1 января 1970 года до момента срабатывания события. result содержит по­следнее возвращенное обработчиком события значение; type - тип собы­тия; which - значение нажатой клавиши или клавиши мыши.

Методы объекта Event: isDefaultPrevented()- был ли вызван метод preventDefault(); event.isImmediatePropagation Stopped () - был ли вызван метод event.stopImmediatePropagation(); isPropagationStopped() -был ли вызван метод stopPropagation();.

Методы addEventListener, removeEventListener, attachEvent.

Еще одна возможность обработки событий состоит в использовании методов addEventListener (событие, обработчик события, этап события) и removeEventListener (событие, обработчик события, этап события). С помощью этих методов обработчик события можно задать или отменить для любого DOM-элемента в самом скрипте без назначение атрибута on + "событие". Здесь 1-й параметр – это событие без префикса "on" ("click", "mousemove", "blur", "load" ...), 2-й параметр – функция - обработчик события, 3-й параметр – этап события false или true. Если false, то обработчик события будет выполняться на этапе всплытия события, если true - то на этапе перехвата события. Рассмотрим пример

<html><head>

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

</head>

<body >

<p id="test">Тест</p>

<script type="text/javascript">

function f(){alert('Тест')};

var test=document.getElementById('test');

test.addEventListener('click',f,false);

</script>

</body> </html>

Если щелкнуть мышкой по элементу <p>, вызовется метод alert(). Следует заметить, что скрипт с методом addEventListener() оптимально прописывать в конце Html-документа или после загрузки всех необходимых для выполнения скрипта DOM-элементов. Можно также использовать метод загрузки скрипта после происшествия window.onload