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

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

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

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

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

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


Конструкторское Web-бюро
10.3 Всплытие и перехват событий

Автор: Denisido

Дата: 2010-11-07

Всплытие событий

Данная концепция, известная как event bubbling означает, что на одно и то же событие могут отвечать сразу несколько элементов. Предположим, что у нас есть элемент DIV, в котором мы поместили абзац со ссылкой внутри:


  
<div id="main">
<p id="par1">Это абзац со ссылкой внутри <a id="link1" href="10-2.html">ССЫЛКА</a></p>
</div>

Теперь присвоим обработчик событию щелчка по ссылке, где пропишем, что никуда переходить нам не нужно и выведем сообщение в модальное окно:

Запустить!
// Всплытие и перехват событий   *** JS-код ***
  
window.onload = scriptAfterLoad; // выполнит ф-цию scriptAfterLoad после загрузки стр.
  
function scriptAfterLoad() {
	var link1 = document.getElementById('link1');
	if(link1.addEventListener) {
	link1.addEventListener('click', clickLink, false);
	}
	else {
	link1.attachEvent('onclick', clickLink)
	};
}; // end scriptAfterLoad Func
  
  
function clickLink(event) {
	alert('Кликнули по ссылке!');
	(window.event) ? event.returnValue = false : event.preventDefault();
}; // end Func

Если вы сохраняете сценарий в отдельный файл, который прикрепляете к странице между парным тегом head или просто прописываете вначале, то нужно исполнить его только после загрузки страницы. В этом случае нам поможет событие load объекта window. После этого первым делом идентифицируем наш элемент - ссылку. После определяем метод с которым будем работать: attachEvent() для Internet Explorer или addEventListener() для остальных, поддерживающих стандарты консорциума W3C, внутри присваиваем событие, на которое нужно реагировать и функцию обработчик clickLink. В обработчике с помощью команды alert() выводим в модальное окно сообщение, что кликнули именно по ссылке и далее пишем условие, в зависимости от типа браузера, т.к. в Web-обозревателе Firefox свои свойства и методы для событий, которые отличаются от остальных, но есть и схожие, правда их не так много. Чтобы отменить поведение для данного события в Firefox используют вызов метода preventDefault объекта Event, который не принимает никаких параметров и ничего не возвращает. Для этих же целей в остальных браузерах поддерживается свойство returnValue. Значение false отменяет поведение.

Теперь представим, что к тегу <p> вам нужно привязать еще одно событие click. Допишем наш скрипт и выведем на экран сообщение о щелчке по абзацу:

Запустить! Запустить c true!
// Всплытие и перехват событий   *** JS-код ***
  
window.onload = scriptAfterLoad;
  
function scriptAfterLoad() {
	var mainDiv = document.getElementById('main');
	mainDiv.style.border = '1px solid #cc0000'; // сделали рамку для div
  	
	var link1 = document.getElementById('link1');
	if(link1.addEventListener) {
	link1.addEventListener('click', clickLink, false);
	}
	else {
	link1.attachEvent('onclick', clickLink)
	};
  
//*************************************************************//
	var par1 = document.getElementById('par1');
	par1.style.background = '#f9f9f9'; // background для абзаца
	if(par1.addEventListener) {
	par1.addEventListener('click', clickPar, false);
	}
	else	{
		par1.attachEvent('onclick', clickPar)
		};
}; // end scriptAfterLoad Func
  
  
function clickPar(event) {                // для ссылки
	alert('Кликнули по абзацу!');
}; // end Func
  
  
function clickLink(event) {               // для абзаца
	alert('Кликнули по ссылке!');
	(window.event) ? event.returnValue = false : event.preventDefault();
}; // end Func

Данный скрипт явно демонстрирует как происходит всплытие событий. Смотрите, мы специально сделали для абзаца задний фон светло-серым, чтобы видеть его параметры. Если вы попытаетесь кликнуть на любое место абзаца, КРОМЕ ссылки, то на экран выведется сообщение, что кликнули именно по абзацу. Но если вы кликните по ССЫЛКЕ, то получите event bubbling эффект, ведь, по сути, мы кликаем и по блоку и по абзацу и по ссылке. Теперь, что касается функции-слушителя addEventListener и его третьего необязательного параметра. Как уже говорилось в ранних уроках, то значение false - отключает перехват, true - включает. В нашем случае хорошо видно что произойдет при изменении значения для абзаца с false на true.

Перехват событий

Один перехват мы уже сделали - предотвратив переход по ссылке и даже описали с помощью каких свойств и методов объекта Event это можно сделать. Но теперь нам нужно предотвратить всплытие событий и сделать так, чтобы при клике на ссылку, всплытие не происходило. Для этих целей в модели Firefox есть метод stopPropagation() объекта Event, а остальные поддерживают свойство cancelBubble того же объекта:

Запустить!
// Всплытие и перехват событий   *** JS-код ***
  
window.onload = scriptAfterLoad;
  
function scriptAfterLoad() {
	var mainDiv = document.getElementById('main');
	mainDiv.style.border = '1px solid #cc0000'; // сделали рамку для div
	
	var link1 = document.getElementById('link1');
	if(link1.addEventListener) {
	link1.addEventListener('click', clickLink, false);
	}
	else {
	link1.attachEvent('onclick', clickLink)
	};
  
//*************************************************************//
	var par1 = document.getElementById('par1');
	par1.style.background = '#f9f9f9';
	if(par1.addEventListener) {
	par1.addEventListener('click', clickPar, false);
	}
	else	{
		par1.attachEvent('onclick', clickPar)
		};
}; // end scriptAfterLoad Func
  
  
function clickPar(event) {
	alert('Кликнули по абзацу!');
	(window.event) ? event.cancelBubble = false : event.stopPropagation();
}; // end Func
  
  
function clickLink(event) {
	alert('Кликнули по ссылке!');
	(window.event) ? event.cancelBubble = true : event.stopPropagation();
	(window.event) ? event.returnValue = false : event.preventDefault();
}; // end Func



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



Коментарии:

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

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

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

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

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

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

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

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