Урок 9. Понятие события

Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши и т.п.) формирует некоторое событие, т.е. сообщение о произошедшем.

Свойства события

Сообщение о событии формируется в виде объекта, т.е. контейнера для хранения информации.

В объектной модели имеется объект event, являющийся подобъектом объекта окна window. Он содержит информацию о том, какое событие произошло, какой элемент должен на него реагировать, и ряд других характеристик.

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

<html>
<head>
<script>
	function test() {
		str = ""
		str += "x = " + window.event.x + "\n"
		str += "y = " + window.event.y + "\n"
		str += "Вы нажали клавишу: "
		if (window.event.shiftKey) str += "Shift"
		if (window.event.ctrlKey) str += "Ctrl"
		if (window.event.altKey) str += "Alt" 
		alert(str)
	}
</script>
</head>
<body>
	<button onclick="test()">Нажми эту кнопку</button>
</body>
</html>

Свойство srcElement возвращает ссылку на объект элемента HTML-документа, который инициировал событие. При получении такой ссылки можно узнать или изменить значения свойств этого объекта и применить к нему любые из его методов.

<html>
<head>
<script>
	function chtext() {
		x = window.event.srcElement // ссылка на объект
		x.innerText = "Hahahahaha!!!" // замена текста
	}
</script>
</head>
<body>
	<button onclick="chtext()">Button One</button>
	<button onclick="chtext()">Button Two</button>
</body>
</html>

У объекта event имеется изменяемое свойство returnValue (возвращаемое значение). С его помощью можно отменять действия принятые по умолчанию. Для этого достаточно присвоить ему значение false.

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

<script>
	function myref() {
		ret = confirm ("Are you sure?")
		if (!ret) window.event.returnValue = false
	}
</script>
<a onclick="myref()" href="http://inf1.info">Информатика</a>

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

<script>
	function myref1() {
		alert("Был щелчок на ссылке")
		window.event.returnValue = false
	}
</script>
<a onclick="myref1()" href="">Здесь ничего нет</a>

Прохождение событий

Большинство тегов в HTML являются контейнерными и, следовательно, могут содержать в себе другие теги. При этом может оказаться так, что одно и тоже событие будет обозначено в различных, но вложенных друг в друга тегах. Что произойдет при наступлении события?

<div onclick="alert('Щелчок по блоку')">
	<img src="cat.jpg" >
	<button onclick="alert('Щелчок по кнопке')">Button</button>
</div>

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

<div onclick="alert('Щелчок по блоку')">
	<img src="cat.jpg" >
	<button onclick="alert('Щелчок по кнопке');
		window.event.cancelBubble=true">Button</button>
</div>