Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
10.1 События и обработчики событий

Автор: Denisido

Дата: 2010-10-22

Определение событий

Все действия пользователя (нажатие на кнопки клавиатуры, клики мыши или ее перемещение, загрузка страницы, наведение фокуса и т.п.), на которые реагирует веб-обозреватель, именуются событиями. Язык JavaScript - клиентский язык, т.е. событийно-управляемый. Без него страницы были бы не в состоянии отвечать на действия посетителя или предлагать что-либо интерактивное, динамичное и впечатляющее. Подготовка Web-страницы к ответу на события проходит в два этапа:
- Первым делом идентифицируем элемент страницы, реагирующий на событие;
- присваиваем событие обработчику

Сразу отметим, что существуют разные модели обработки событий. Одна из которых стандартизирована объектной моделью документа, ее еще называют модель Firefox, она более прогрессивная и в ней больше возможностей, но зато не поддерживается Internet Explorer (IE < 8). Другие более простые, но зато поддерживается всеми современными Web-обозревателями. Рассмотрим их.

Встроенные javascript события

Один из самых простых и непрофессиональных способов исполнения функции в момент запуска события называют регистрацией встроенных событий, когда обработчик события присваивается прямо в HTML-код:

Запустить!
// javascript события
  
<p> Нажмите на ссылку и получите результат! А вот и сама 
<a href="#" ONCLICK="alert('событие onclick javascript');">Сcылка на javascript события мыши</a>
</p>

Привязка через свойства объектов

Обработчики событий оформляются в виде функции в случае их привязки к событиям через соответствующие свойства объектов, представляющих элементы страницы:

Запустить!

  
<p id="par">Наведите курсор мышки на текст</p>

<script type="text/javascript">
var text = document.getElementById('par');
text.onmouseover = function() {
                              this.style.color = '#ff0000';
                             };
text.onmouseout = function() {
                              this.style.color = '#000000';
                             };
</script>
Запустить!
// javascript события  (пример №2)
  
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Введение в JS</title>   
<script type="text/javascript">
function parClick() {
			alert('Вы кликнули по абзацу и получили ответ от javascript события мыши');
		    };
</script>
  </head>
  <body>
<p id="par2">Кликни меня</p>
<script type="text/javascript">
var text = document.getElementById('par2');
text.onclick = parClick;
</script>
  </body>
  </html>

В строке №17 функция, присвоенная обработчику событий onclick, похожа на значение, присваиваемое переменной. Знак равенства (=) по существу сохраняет ссылку на функцию в обработчике событий. Вот почему после имени функции нет скобок!

Привязка обработчика к событию с помощью функции-слушителя

Стандартами DOM рекомендуется использование именно этого способа, но, к большому сожалению, не все Web-обозреватели его поддерживают. В этой модели привязка к заданному элементу страницы и событию осуществляется с использованием метода addEventListener() объекта HTMLElement:

Запустить!
// javascript события
  
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>javascript события</title>   
<script type="text/javascript">
			var n = 0;
function parClick() {	
			var val = document.getElementById('par3');
			if(n == 1) {
				val.style.color = '#000000';	
				n--;
			      }
			else {	val.style.color = '#ff0000';
				n++;
			     };
		    }; 
</script>
  </head>
  <body>
<p id="par3">Кликни меня два раза или более.</p>
<script type="text/javascript">
var text = document.getElementById('par3');
text.addEventListener('click', parClick, false);
</script>
  </body>
  </html>

В качестве первого параметра передается имя события в виде строки формата DOM (строка кода №25). Вторым параметром передается сама функция-слушитель (parClick). Третий параметр указывает Web-обозревателю, следует ли перехватывать события, возникающие в дочерних по отношению к текущему элементах страницы (булевое значение false - отключает перехват, true - включает).

Метод removeEventListener объекта HTMLElement позволяет удалить подключенную ранее функцию-слушателя:

// javascript события
  
text.removeEventListener('click', parClick, false);

Что касается Internet Explorer, то этот Web-обозреватель избрал свой собственный способ работы с событиями. Он использует метод attachEvent() для выполнения той же задачи:

// javascript события
  
text.attachEvent('onclick', parClick);

Теперь преобразуем наш код и сделаем так, чтобы работало и в Internet Explorer:

Запустить!
// javascript события
  
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>javascript события</title>   
<script type="text/javascript">
var textColor = ['#330000','#006600','#cc0000','#3366ff','#660033','#cc6600'];
var textBgColor = ['#99fff','#cccc66','#33ffff','#cc9999','#ff9999'];
function parClick() {
		var val = document.getElementById('par3');
		val.style.color = textColor[Math.round(Math.random() * 6)];
		val.style.backgroundColor = textBgColor[Math.round(Math.random() * 5)];
		    };
</script>
  </head>
  <body>
<h1 id="par3">Кликни меня два раза или более.</h1>
<script type="text/javascript">
var text = document.getElementById('par3');
if(text.addEventListener) {
text.addEventListener('click', parClick, false);
}
else {
text.attachEvent('onclick', parClick);
};
</script>
  </body>
  </html>



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): fgh1233
Дата: 2010-10-28

Как всегда уроки этого веб мастера дополняют друг друга и следуют от простого к сложному. Очень нужный урок по событиям и обработчикам - такого материала я в сети больше нигде не нашел!Ждем следующих уроков. Кстати, обратил внимание, что Яндекс справедливо добавил этому ресурсу ТиЦ +10. Слово за Гуглом!

Коментарий добавил(а): fibro
Дата: 2012-02-25

В 9-ой строчке последнего примера, помоему ошибка: вместо #99fff должно быть #99ffff

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 13612

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.