Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок №9. Явление bubbling, отмена обработки событий в JS.


Явление bubbling

Суть явления bubbling ("пузырящееся") в JavaScript заключается в следующем: когда элемент находится в контейнере (является потомком некоего родителя), то возникающее в нём событие возбуждается также и в родителе. bubbling называют также propagation.

Для того, чтобы отменить явление bubbling, существует метод .stopPropagation(). В следующем примере событие onclick, возникающее при клике, сработает один раз для функции f1 и дважды для функции f2.
Внимание! Для метода addEventListener события прописываются без префикса "on", т.е. в данном случае просто click:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Явление bubbling</title>
		</head>
		<body>
		
			<h1>Bubble events</h1>
			
			<div id="div1">
				<input id="in1" /> DIV1
			</div>
			
			<div id="div2">
				<input id="in2" /> DIV2
			</div>
		
		<script>
			var f1 = function(e){
				e.stopPropagation();	// появится один раз
				console.log(e.target);
			}
			
			var f2 = function(e){
				console.log(e.target);	// появится дважды
			}
			
			document.querySelector("#in1").addEventListener ("click", f1);
			document.querySelector("#div1").addEventListener ("click", f1);
			document.querySelector("#in2").addEventListener ("click", f2);
			document.querySelector("#div2").addEventListener ("click", f2);
		</script>
		
		</body>
	</html>

Результат отображения:


Метод .target в примере позволяет получить элемент, на котором произошло указанное событие.

Отмена обработки событий в JS - запрещаем ввод конкретных символов

Предположим, у нас есть текстовое поле, и мы хотим запретить пользователю вводить некоторые символы, например, пробелы. В этом случае нужно повлиять на событие keydown, т.к. при keyup (отпускании клавиши) событие уже "свершилось" и его отмена будет невозможна. Рассмотрим пример в котором в текстовое поле запрещён ввод пробелов:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Отмена обработки событий</title>
		</head>
		<body>
			
			<h1>Запрет ввода пробелов</h1>
			<input />
			
			<script>
				document.querySelector("input").addEventListener("keydown",
					function(ev){
						if(ev.keyCode == 32){
							ev.preventDefault();
						}
					});
			</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

Этот пример не сработает на мобильных устройствах, т.к. там совсем другие коды кнопок!

В примере мы ставим условие if, в котором прописываем, что при попадании в переменную ev кода 32 (это код пробела) будет использован метод preventDefault, отменяющий это событие. В результате при нажатии на пробел в текстовом поле, он не будет отображён.

Возбуждение события в JavaScript

Для возбуждения какого-либо события в JS используется метод dispatchEvent. Здесь мы пока коснёмся его кратко и будем изучать всё более и более подробно помере надобности в других уроках этого курса.

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

	/* Так: */
	alert("Привет");
	
	/* Или так: */
	var x = "Привет";
	alert(x);
	

Особенность метода alert() в том, что при его срабатывании дальнейшее выполнение любого кода на странице прекращается до нажатия кнопки "ok" на выведенном сообщении.

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

Оператор new создаёт новый объект, используя встроенную функцию-конструктор.

Пока это всё, что Вам нужно знать для разбора следующего примера, в котором при клике на кнопку возбуждается событие, вызывающее функцию, которая в свою очередь запускает метод alert():

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Возбуждение события</title>
		</head>
		<body>
		
			<h1>Метод dispatchEvent</h1>
			<div id="div1">
				<button id="btn">Кнопочка</button> Нажми!
			</div>
			
			<div id="div2">
				<input id="inp" size="10" /> Введи 1
			</div>
			
			<script>
				var func1 = function (ev){
					alert("Спасибо!");
				}
				var func2 = function (ev){
					/* В условии через оператор "или" (||) указываем два кода - код
					единицы для цифрового ряда и калькулятора клавиатуры */
					if(ev.keyCode == 49 || ev.keyCode == 97){
						document.querySelector("#btn").dispatchEvent(
						new MouseEvent('click'));
					}
				}
				document.querySelector("#btn").addEventListener("click", func1);
				document.querySelector("#inp").addEventListener("keydown", func2);
			</script>
		
		</body>
	</html>
Показать в браузере (откроется в новой вкладке)

В этом примере при нажатии на "кнопочку" или при нажатии клавиши 1 (в условии через оператор "или" || мы указали два кода - код единицы для цифрового ряда и калькулятора клавиатуры) в текстовом поле возникает сообщение методом alert. Этот пример, как и предыдущий, не будет работать на смартфонах, т.к. там у сенсорных кнопок другие коды.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля