Onclick в javascript event примеры, все способы сделать click js

Обработка события onclick для меню

В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка

Мы используем css-свойство , чтобы меню появлялось из прозрачного состояния (за это отвечает свойство ).  Обратите внимание, что теги

Событие onclick для меню

<style>
@keyframes fadeInMenu {
from {opacity: 0}
to {opacity: 1}
}
</style>

<a href=»#» id=»toggleMenu»>Menu</a>
<ul id=»mymenu» class=»hideText»>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>About Us</a></li>
<li><a href=»#»>Portfolio</a></li>
<li><a href=»#»>Contacts</a></li>
</ul>

<script>
toggleMenu.addEventListener(‘click’, showHideMenu);
function showHideMenu(event){
event.preventDefault();
mymenu.classList.toggle(‘hideText’);
mymenu.classList.contains(‘hideText’) ? mymenu.style.animation=’none’ :
mymenu.style.animation=’fadeInMenu .8s’;
}
</script>

В функцию   передается параметр , который мы вроде бы нигде не записывали. Этот параметр — ссылка на событие со всеми его свойствами и методами. Нужен параметр для того, чтобы при клике на ссылке страница не «прыгала» вверх, т.к. именно к этому приводит такая запись атрибута . Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода .

Вы можете проверить действие метода , кликнув на ссылке с текстом «Menu»  и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.

Обработчик события как атрибут элемента

Это самый старый способ назначения обработчиков события и наименее используемый на данный момент. Для того чтобы его добавить, необходимо к имени события добавить приставку «on» и записать примерно такой код:

Обработчик события как атрибут

JavaScript

<button onclick=’alert(«Событие произошло!»)’>Нажми меня</button>

Нажми меня

Можно вызвать функцию, в которую можно передать один или несколько аргументов:

Обработчик события как атрибут элемента

JavaScript

<script>
function change(element, color){
element.style.backgroundColor = color;
}
</script>
<p onclick=»change(this, ‘red’)»>Кликни здесь, и этот абзац станет красным.
Но только один раз.</p>
<p onclick=»change(this, ‘lime’)»>Кликни здесь, и этот абзац станет зеленым.
Но только один раз.</p>

Пример этого кода:

Кликни здесь, и этот абзац станет красным. Но только один раз.

Кликни здесь, и этот абзац станет зеленым. Но только один раз.

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

Использовать этот способ нужно в учебных целях поначалу, а также тогда, когда это самый простой способ или нужно очень быстро добавить обработчик события к 1 элементу.

Погружение

Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.

Стандарт DOM Events описывает 3 фазы прохода события:

1. Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2. Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3. Фаза всплытия (bubbling stage) – событие начинает всплывать.

Картинка из спецификации демонстрирует, как это работает при клике по ячейке , расположенной внутри таблицы:

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

Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.

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

Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент вот так:

Существуют два варианта значений опции :

• Если аргумент (по умолчанию), то событие будет поймано при всплытии.
• Если аргумент , то событие будет перехвачено при погружении.

Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение. Давайте посмотрим и всплытие и погружение в действии:

Давайте посмотрим и всплытие и погружение в действии:

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

Если вы кликните по , то последовательность следующая:

1. → → → (фаза погружения, первый обработчик)
2. (фаза цели, срабатывают обработчики, установленные и на погружение и на всплытие, так что выведется два раза)
3. → → → (фаза всплытия, второй обработчик)

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

Чтобы убрать обработчик , нужна та же фаза

Если мы добавили обработчик вот так , то мы должны передать то же значение аргумента в , когда снимаем обработчик.

На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения

Если у нас несколько обработчиков одного события, назначенных на один элемент, в рамках одной фазы, то их порядок срабатывания – тот же, в котором они установлены:

Событие onLoad. Свойства высоты и ширины объекта в javaScript

Для выполнения следующего примера нам понадобится новое понятие — событие.

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

Рассмотрим одно из самых распространенных событий — — которое происходит при загрузке документа (когда пользователь своими действиями вызвал загрузку веб-страницы).

Рассмотрим пример использования события javascript для изменения ширины и высоты элемента.

Пример: Добавить на страницу изображение и при помощи javascript при наступлении события загрузки страницы сделать ширину изображения соответствующей ширине окна браузера.

Решение: 

function resizeImg(){
	var myImg=document.getElementById("img1");
	myImg.style.width=document.body.clientWidth;
}
...

<body onload="resizeImg()" >
<img src="1.jpg" id="img1">

В примере основные действия происходят в функции :
переменная ассоциирована с тегом — картинкой, свойство которой — ширина — меняется в самой функции.
Вызов функции происходит по загрузке страницы в событии тела документа (тело — — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).

Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод измените:
— размер (свойства и ) всех изображений страницы
— размер границы (свойство ) всех изображений.

Дополните код:

var allImg=document...; // получаем массив изображений
for (var i=; i < allImg.length; i++){
    allImgi.....; // меняем свойство width
    ...; // меняем свойство height
    ...; // меняем border
}

javascript onclick без клика

javascript onclick без клика

но первое, что я подумал… вспомнил старый пошлый анекдот! дети, если вам нет 16, то закрываем страницу на этом месте!

Закрыли!? Я жду!

Теперь продолжим со взрослыми…

Встречается парочка на хате, а у парня был попугай! Девушка:

— я не могу заниматься этим, когда он смотрит…

Парень накинул тряпку на клетку.

И говорит попугаю! Будешь подсматривать — голову оторву!

Начали заниматься любовью!

— Давай я сверху, ты снизу!

— Давай!

…

— Давай ты сверху, я снизу!

— Давай!

…

— А теперь давай ты сверху, и я сверху!

Попугай:

— Пусть мне оторвут голову! Но это я должен увидеть!

Свойства событий указателя

События указателя содержат те же свойства, что и события мыши, например , и т.п., и несколько дополнительных:

• – уникальный идентификатор указателя, вызвавшего событие.

  Идентификатор генерируется браузером. Это свойство позволяет обрабатывать несколько указателей, например сенсорный экран со стилусом и мульти-тач (увидим примеры ниже).

• – тип указывающего устройства. Должен быть строкой с одним из значений: «mouse», «pen» или «touch».

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

• – равно для основного указателя (первый палец в мульти-тач).

Некоторые устройства измеряют область контакта и степень надавливания, например пальца на сенсорном экране, для этого есть дополнительные свойства:

• – ширина области соприкосновения указателя (например, пальца) с устройством. Если не поддерживается, например мышью, то всегда равно .
• – высота области соприкосновения указателя с устройством. Если не поддерживается, например мышью, то всегда равно .
• – степень давления указателя в диапазоне от 0 до 1. Для устройств, которые не поддерживают давление, принимает значение (нажато) либо .
• – нормализованное тангенциальное давление.
• , , – специфичные для пера свойства, описывающие положение пера относительно сенсорной поверхности.

Эти свойства большинством устройств не поддерживаются, поэтому редко используются. При необходимости, подробности о них можно найти в .

Событие onclick javaScript и три способа обработки событий

Событие происходит во время одинарного щелчка кнопкой мыши. Обычно для события назначается обработчик, то есть функция, которая сработает, как только событие произошло. Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:

Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

1. Через свойство объекта с использованием пользовательской функции:

Скрипт:

function message() {
		alert("Ура!");
	}

html-код:

<body>
<form>
<input type="button" name= "myButton" onclick="message()" value="Щелкни!">
<form>

В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут («по щелчку»), в значении которого стоит вызов функции с названием . Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.
Скрипт при такой обработке события обычно находится в области документа

Через атрибут тега:

<body>
<form name="myForm">
<input type="button" name="myButton" 
    value="Щелкни!" onclick="javascript: alert('Ура!')">
<form>

Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
В качестве атрибута кнопки указывается («по щелчку»), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (). В нашем случае оператор для вывода модального окна со словом «Ура!»

Через регистрацию функции-обработчика в качестве свойства элемента:

html-код:

<form name="myForm">
<input type="button" value="Щелкни!" id="myButton">
<form>

Скрипт:

document.myForm.myButton.onclick = message; 
function message() {
	alert('Ура!');
}

В html-коде здесь присутствует кнопка с атрибутом , который необходим для обращения к кнопке через скрипт.

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

Скобки после названия функции не ставятся. В данном случае это именно ссылка на функцию, иначе, при использовании скобок, функция была бы вызвана, а не назначена в качестве обработчика событий.

Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

Как лучше выводить результаты примеров?

Важно: При вызове после окончания загрузки страницы (при обработке событий onclick, oninput, …), страница перезапишется, поэтому вызывать этот метод не рекомендуется. Для примеров лучше использовать метод .

добавляет html во время построения DOM

блокируют выполнение JS, пока пользователь не нажмёт OK

Рассмотрим все простые способы вывода отладочной информации:

1. alert('str'); // показывает окошко

2. document.write('htmlstr'); // пишет на страницу

3. document.innerHTML += 'htmlstr'; // добавляет на страницу

4. console.log('str'); // выводит в консоль браузерах

Задание Js8_5. Выполните задание по инструкции:

1. Создайте веб-страницу и расположите в ней тег с изображением грустного смайлика.
2. Щелчок на изображении () вызывает заданный метод (пользовательская функция):

<img id="smileImg" src="smile1.jpg" onclick="sayHello()" >

В скрипте опишите метод (функция ), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство тега ):

function sayHello() { 
	var userName=prompt("Как вас зовут?");
	if(userName){
		alert(...);
		document.getElementById("smileImg"). ...=...;
	}
}

 =>>

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Захват указателя

Захват указателя – особая возможность событий указателя.

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

Основной метод:

elem.setPointerCapture(pointerId) – привязывает события с данным pointerId к elem. После такого вызова все события указателя с таким pointerId будут иметь elem в качестве целевого элемента (как будто произошли над elem), вне зависимости от того, где в документе они произошли.

Другими словами, меняет всех дальнейших событий с данным на .

Эта привязка отменяется:

• автоматически, при возникновении события или ,
• автоматически, если удаляется из документа,
• при вызове .

Захват указателя используется для упрощения операций с переносом (drag’n’drop) элементов.

В качестве примера давайте вспомним реализацию слайдера из статьи Drag’n’Drop с событиями мыши.

Мы делаем элемент для слайдера – полоску с «ползунком» () внутри.

Затем он работает так:

1. Пользователь сначала нажимает на ползунок – срабатывает .
2. Затем двигает указателем его – срабатывает , и мы передвигаем ползунок вместе с ним.

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

Такое решение выглядит слегка «грязным». Одна из проблем – это то, что движения указателя по документу могут вызвать сторонние эффекты, заставить сработать другие обработчики, не имеющие отношения к слайдеру.

Захват указателя позволяет привязать к и избежать любых подобных проблем:

• Мы можем вызывать в обработчике ,
• Тогда дальнейшие события указателя до будут привязаны к .
• Затем, когда произойдёт (передвижение завершено), привязка будет автоматически удалена, нам об этом не нужно беспокоиться.

Так что, даже если пользователь будет двигать указателем по всему документу, обработчики событий будут вызваны на . Причём все свойства объекта события, такие как , будут корректны – захват указателя влияет только на .

Вот основной код:

Полное демо:

Таким образом, мы имеем два бонуса:

1. Код становится чище, поскольку нам больше не нужно добавлять/удалять обработчики для всего документа. Удаление привязки происходит автоматически.
2. Если в документе есть какие-то другие обработчики , то они не будут нечаянно вызваны, пока пользователь находится в процессе перетаскивания слайдера.

Существует два связанных с захватом события:

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

Координаты мыши: clientX(Y)/pageX(Y)

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

Координаты курсора мыши относительно окна находятся в стандартных свойствах . Они одинаково поддерживается всеми браузерами.

Если у вас есть окно 500×500, и мышь находится в центре, то и будут оба равны 250. Если вы затем проскроллируете документ вниз, налево или вверх, не двигая курсор — значения не изменятся, так как отсчитываются относительно окна, а не документа.

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

Если у вас есть окно 500×500, и мышь находится в центре, то и будут оба равны 250. Если вы затем проскроллируете на 250 пикселей вниз, станет равным 750.

Таким образом содержат координаты, на каком месте документа произошло событие, учитывая все прокрутки.

Свойства поддерживаются всеми браузерами, кроме Internet Explorer.

В IE их можно получить из , прибавив к ним .

Обычно оно находится в <body>: , но это не всегда так. Например, при выборе Strict DTD оно высчитывается для <html>: . Кроме того, тэга <body> может просто не быть в документе.

Поэтому мы сначала возьмем (если есть), затем проверим . Если нет ни того, ни того, то 0.

var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0)

Кроме того, в IE может быть немного сдвинут с позиции 0,0. Значение сдвига находится в , и его также необходимо учесть.

Этот код позволяет надежно получить для IE, в котором его изначально нет:

if (e.pageX == null && e.clientX != null ) { 
    var html = document.documentElement
    var body = document.body

    e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
    e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}

Этот обработчик обновляет координаты мыши относительно документа.

function mouseShowHandler(e){
	e = e || window.event

	if (e.pageX == null && e.clientX != null ) { 
		var html = document.documentElement
		var body = document.body
	
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	
	document.getElementById('mouseX').value = e.pageX
	document.getElementById('mouseY').value = e.pageY
}

Координата X:
Координата Y:

Выносим код события onclick в javascript-функцию

Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:

<script>
function ChangeColor(Element) {
	if (Element.style.color == 'green') Element.style.color = 'red';
	else Element.style.color = 'green';
	return false;
}
</script>

<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>

Код в действии:

Нажмите на ссылку:

Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».

Кнопка мыши: which/button.

После получения события обычно интересно узнать, какая кнопка была нажата. Если, конечно, это не событие , с которым все и так понятно

Для этого в объекте есть два свойства: и , которые содержат числовые значения, соответствующие нажатой кнопке. К сожалению, тут есть некоторые несовместимости.

Свойство было изначально изобретено Netscape, а использовалось в Internet Explorer.
Через некоторое время браузеры стали использовать оба и все перепуталось.

В стандарте W3C прописано свойство , которое ведет себя, как в Firefox, т.е:

• 0 — левая кнопка
• 1 — средняя кнопка
• 2 — правая кнопка

Подход создателей браузера Internet Explorer, вообще говоря, более универсальный, так как является 3-битовым числом, каждый бит которого отвечает за кнопку мыши.

Так, (первый бит) установлен в 1, если нажата левая кнопка, (второй бит) установлен в 1, если нажата правая кнопка, и (третий бит) — если нажата средняя.

В результате мы не можем отловить, когда, например, нажаты левая и правая кнопки, а когда только левая или только правая. К сожалению, это можно сделать только в IE.

Удобнее всего — взять за основу свойство , которое одинаково поддерживают почти все браузеры.

Остается лишь составить из для Internet Explorer:

if (!e.which && e.button) {
  if (e.button & 1) e.which = 1
  else if (e.button & 4) e.which = 2
  else if (e.button & 2) e.which = 3
}

Вот универсальный тестовый стенд по определению клавиш. Выбирайте любую мышь и жмите кнопу из любого браузера — ниже появятся названия событий и значения .

Итого

Делегирование событий – это здорово! Пожалуй, это один из самых полезных приёмов для работы с DOM.

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

Алгоритм:

1. Вешаем обработчик на контейнер.
2. В обработчике проверяем исходный элемент .
3. Если событие произошло внутри нужного нам элемента, то обрабатываем его.

Зачем использовать:

• Упрощает процесс инициализации и экономит память: не нужно вешать много обработчиков.
• Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
• Удобство изменений DOM: можно массово добавлять или удалять элементы путём изменения и ему подобных.

Конечно, у делегирования событий есть свои ограничения:

Во-первых, событие должно всплывать. Некоторые события этого не делают. Также, низкоуровневые обработчики не должны вызывать .
Во-вторых, делегирование создаёт дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, не обязательно на элементах, которые нам интересны

Но обычно эта нагрузка настолько пустяковая, что её даже не стоит принимать во внимание.

Итого

При наступлении события – самый глубоко вложенный элемент, на котором оно произошло, помечается как «целевой» ().

• Затем событие сначала двигается вниз от корня документа к , по пути вызывая обработчики, поставленные через , где – это сокращение для .
• Далее обработчики вызываются на целевом элементе.
• Далее событие двигается от вверх к корню документа, по пути вызывая обработчики, поставленные через и без третьего аргумента или с третьим аргументом равным .

Каждый обработчик имеет доступ к свойствам события :

• – самый глубокий элемент, на котором произошло событие.
• (=) – элемент, на котором в данный момент сработал обработчик (тот, на котором «висит» конкретный обработчик)
• – на какой фазе он сработал (погружение=1, фаза цели=2, всплытие=3).

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

В современной разработке стадия погружения используется очень редко, обычно события обрабатываются во время всплытия. И в этом есть логика.

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

Тоже самое справедливо для обработчиков событий. Код, который «навесил» обработчик на конкретный элемент, знает максимум деталей об элементе и его предназначении. Например, обработчик на определённом скорее всего подходит только для этого конкретного , он знает все о нём, поэтому он должен отработать первым. Далее имеет смысл передать обработку события родителю – он тоже понимает, что происходит, но уже менее детально, далее – выше, и так далее, до самого объекта , обработчик на котором реализовывает самую общую функциональность уровня документа.

Всплытие и погружение являются основой для «делегирования событий» – очень мощного приёма обработки событий. Его мы изучим в следующей главе.