Событие onclick в javascript и jquery на примерах. Применение обработчиков событий
Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы.
Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, Обработка события
Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.
Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :
1 |
Страница |
JavaScript:
JavaScript:
17 |
var inform = function () { alert("Другая кнопка"); }; var mbutton = document.getElementById("mbutton"); mbutton.onclick = inform; |
Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение.
Существует метод addEventListener() , который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода.
элемент.addEventListener (событие, функция)
Параметры:
событие - событие, которое нужно обрабатывать
функция - функция, которая становится обработчиком
В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно.
HTML код:
| Новая кнопка |
JavaScript:
24 |
var newinform = function () { alert("Нажата новая кнопка"); }; var newbutton = document.getElementById("newbutton"); newbutton.addEventListener("click", newinform); |
Метод removeEventListener() позволяет удалить обработчик.
элемент.removeEventListener (событие, функция)
С помощью рассмотренного метода, элементу можно назначить несколько обработчиков одного события. Тогда нужно удалять отдельно каждый из них.
Объект событияПри каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.
Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:
13 |
button.onclick = function (event) { alert(event.type); }; |
Нажмите на кнопку, будет выведен тип сработавшего события.
У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.
Да, библиотека Ext Core представляет весьма мощные средства для создания новых элементов Web-страницы. К сожалению, удалить ненужные элементы можно только методомremove объектаElement . Он немедленно удаляет данный элемент Webстраницы со всем его содержимым, не принимает параметров и не возвращает значения.
Ext.get("cmain").remove();
Здесь мы удаляем контейнер cmain со всем его содержимым.
Обработка событийТеперь самое время рассмотреть один ключевой вопрос Web-программирования: события, их возникновение и обработка.
Понятие события и его обработкиРассматривая примеры Web-сценариев, мы исходили из предположения, что они выполняются при загрузке Web-страницы. Как мы уже знаем изглавы 14 , Webсценарий исполняется в том месте HTML-кода Web-страницы, в котором присутствует создающий его тег . При этом неважно, является Web-сценарий внутренним (помещенном прямо в HTML-код) или внешним (хранящимся в отдельном файле Web-сценария).
Однако существует большая группа Web-сценариев, которые выполняются при возникновении определенного события, к которому эти Web-сценарии были привязаны. О них-то и пойдет сейчас разговор.
Событием в терминологии Web-программирования называется некое условие, которое возникает в Web-обозревателе в ответ на действия посетителя или в процессе работы самого Web-обозревателя. Так, щелчок левой кнопкой мыши на элементе Web-страницы приводит к возникновению события "щелчок левой кнопкой мыши", а перемещение курсора мыши над элементом Web-страницы - "перемещение курсора мыши". Нажатие клавиши на клавиатуре приводит к возникновению события "нажатие клавиши", а ошибка в загрузке изображения - "ошибка загрузки".
Существует много разнообразных событий, как говорится, на все случаи жизни. Ежесекундно их возникает десятки, если не сотни.
Так вот, мы можем заставить Web-сценарий выполняться в ответ на возникновение определенного события в определенном элементе Web-страницы. Для этого нужный Web-сценарий особым образом привязывается к данному элементу Webстраницы и событию. Такие Web-сценарии называютсяобработчиками событий .
Что может делать обработчик события? Да что угодно! При наведении курсора мыши он может привязывать к элементу Web-страницы другой стилевой класс, меняя его представление. (Именно такой обработчик события мы создали вглаве 14 .) При щелчке левой кнопкой мыши на элементе Web-страницы - разворачивать или сворачивать блочный контейнер, открывая или скрывая его содержимое. А при из-
менении размеров окна Web-обозревателя - менять размеры блочных контейнеров, чтобы полностью занять ими клиентскую область окна.
Теперь уясним следующие моменты, связанные с обработчиками событий.
Обработчик события оформляется в виде функции, которая принимает два параметра. Подробнее об этом мы поговорим потом.
Обработчик события привязывается к конкретному элементу Web-страницы,
в котором возникают события, требующие обработки. Так, если нужно обработать событие "щелчок левой кнопкой мыши" в каком-либо абзаце, обработчик привязывается к данному абзацу.
Обработчик события привязывается к конкретному событию. Так, если мы привязали обработчик к событию "щелчок левой кнопкой мыши", он будет выполняться только при возникновении именно этого события. Другие события, скажем, "двойной щелчок левой кнопкой мыши", он обрабатывать не будет.
Обработчик события выполняется только при возникновении заданного события
в элементе Web-страницы, к которому он привязан. Во время загрузки Webстраницы он не выполняется.
Мы можем привязать один и тот же обработчик сразу к нескольким элементам Web-страницы и нескольким событиям. Так, один и тот же обработчик может обрабатывать событие "щелчок левой кнопкой мыши" в абзаце и в гиперссылке. Кстати, так часто и делают.
События объекта ElementСамые полезные для нас на данный момент события, поддерживаемые объектом Element библиотеки Ext Core, представлены в табл. 15.1. Их довольно много, и некоторые из них поддерживаются только определенными элементами Webстраницы.
Таблица 15.1. События объектаElement |
|
Описание |
|
Возникает при прерывании загрузки изображения, аудиоили видеофайла |
|
посетителем. Не всплывает. Действие по умолчанию - отмена загрузки, |
|
отменить его невозможно |
|
Возникает при щелчке левой кнопкой мыши на элементе Web-страницы |
|
после событий mousedown иmouseup . Всплывает. Действие по умолчанию |
|
зависит от конкретного элемента, может быть отменено |
|
Возникает при двойном щелчке левой кнопкой мыши на элементе Web- |
|
страницы. Всплывает. Действие по умолчанию зависит от конкретного эле- |
|
мента, может быть отменено |
|
Возникает при ошибке при загрузке изображения, аудиоили видеофайла. |
|
Не всплывает. Действие по умолчанию - вывод сообщения об ошибке, |
|
отменить его невозможно |
|
Часть III. Поведение Web-страниц. Web-сценарии |
||
Таблица 15.1 (окончание) |
||
Описание |
||
невозможно |
||
Возникает при нажатии любой клавиши. Всплывает. Действие по умолча- |
||
нию - передача нажатой клавиши элементу, имеющему фокус ввода, мо- |
||
жет быть отменено |
||
Возникает при нажатии любой алфавитно-цифровой клавиши между собы- |
||
тиями keydown иkeyup . Если клавиша удерживается нажатой, возникает |
||
постоянно, пока клавиша не будет отпущена. Всплывает. Действие по умол- |
||
чанию - передача нажатой клавиши элементу, имеющему фокус ввода, |
||
может быть отменено |
||
Возникает при отпускании нажатой ранее клавиши. Всплывает. Действие по |
||
умолчанию - передача нажатой клавиши элементу, имеющему фокус вво- |
||
да, может быть отменено |
||
Возникает после успешной загрузки изображения, аудиоили видеофайла. |
||
Не всплы |
||
Возникает при нажатии левой кнопки мыши. Всплывает. Действие по умол- |
||
чанию отсутствует |
||
Возникает при перемещении курсора мыши над элементом Web-страницы. |
||
Всплывает. Действие по умолчанию отсутствует |
||
Возникает, когда курсор мыши уводится с элемента Web-страницы. Всплы- |
||
вает. Действие по умолчанию отсутствует |
||
Возникает, когда курсор мыши наводится на элемент Web-страницы. Всплы- |
||
вает. Действие по умолчанию отсутствует |
||
Возникает при отпускании нажатой ранее левой кнопки мыши. Всплывает. |
||
Действие по умолчанию отсутствует |
||
Не будем пока вдаваться в детали, мы к ним еще вернемся. Сейчас рассмотрим более насущный вопрос.
Привязка и удаление обработчиков событийМетод on объектаElement выполняет привязку указанной функции к указанному событию данного элемента Web-страницы в качестве обработчика:
.on(, )
Первым параметром методу передается строка с названием события, к которому выполняется привязка обработчика. Названия событий приведены в первом столбце табл. 15.1.
Второй параметр - функция, которая станет обработчиком события. Эта функция должна принимать следующие параметры:
первый - экземпляр объекта EventObject , представляющий сведения о событии и позволяющий им управлять (мы рассмотрим этот объект потом);
второй - экземпляр объекта HTMLElement , представляющий элемент Webстраницы, в котором изначально возникло данное событие.
Кроме того, в функцию-обработчик неявно передается еще один параметр - экземпляр объектаHTMLElement , представляющий элемент Web-страницы, в котором в данный момент обрабатывается данное событие, - тот самый элемент, к которому привязан этот обработчик. Событие могло возникнуть в нем изначально, а могло всплыть из дочернего элемента; подробнее об этом будет рассказано в следующем разделе. Данный параметр доступен в теле функции-обработчика через перемен-
ную this .
Ext.get("navbar").on("mouseover", function(e, t) {
Здесь мы привязываем к списку navbar обработчик событияmouseover . Первый параметр методаon определяет название события, которое мы хотим обрабатывать. Второй параметр этого метода содержит объявление функции-обработчика.
В теле функции-обработчика мы обращаемся к переменнойthis , чтобы получить экземпляр объектаHTMLElement , представляющий элемент Web-страницы, чье событие мы обрабатываем. Чтобы получить из него соответствующий экземпляр объектаElement , мы используем методget . После чего привязываем к полученному экземпляру объектаElement стилевой классhovered вызовом методаaddClass .
Отметим, что наша функция-обработчик принимает два параметра, которые, впрочем, нигде в ее теле не используются. Так что мы можем вообще не указывать их в объявлении функции-обработчика:
Ext.get("navbar").on("mouseover", function() {
Ext.get(this).addClass("hovered");
Мы можем оформить обработчик события в виде функции, имеющей имя, а потом указать это имя в качестве второго параметра метода on :
function navbarMouseOver() { Ext.get(this).addClass("hovered");
Ext.get("navbar").on("mouseover", navbarMouseOver);
Это полезно, если мы хотим привязать один обработчик сразу к нескольким событиям одного или нескольких элементов Web-страницы.
Метод removeAllListeners объектаElement удаляет все привязанные к данному элементу Web-страницы обработчики событий. Он не принимает параметров.
Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.
Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript . В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript .
| Событие | Объект | Причина возникновения |
| Abort | Image | Прерывание загрузки изображения |
| Blur | Потеря фокуса элемента | |
| Change | FileUpload, Select, Text, Textarea | Смена значения |
| Click | Area, Button, Checkbox, Document, Link, Radio, Reset, Submit | Клик мыши на элементе |
| DblClick | Area, Document, Link | Двойной клик на элементе |
| DragDrop | Window | Перемещение в окно браузера |
| Focus | Button, Checkbox, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window | Установка фокуса на элементе |
| KeyDown | Нажатие клавиши на клавиатуре | |
| KeyPress | Document, Image, Link, Textarea | Удержание клавиши на клавиатуре |
| KeyUp | Document, Image, Link, Textarea | Отпускание клавиши на клавиатуре |
| Load | Document, Image, Layer, Window | |
| MouseDown | Button, Document, Link | Нажата кнопка мыши |
| MouseMove | Window | Мышь в движении |
| MouseOut | Area, Layer, Link | Мышь выходит за границы элемента |
| MouseOver | Area, Layer, Link | Мышь находится над элементом |
| MouseUp | Button, Document, Link | Отпущена кнопка мыши |
| Move | Frame | Перемещение элемента |
| Reset | Form | Сброс формы |
| Resize | Frame, Window | Изменение размеров |
| Select | Text, Textarea | Выделение текста |
| Submit | Form | Передача данных |
| Unload | Window | Выгрузка текущей страницы |
Теперь разберёмся с тем, как использовать события в JavaScript . Существуют, так называемые, обработчики событий . Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScript имеет следующий общий вид:
OnНазваниеСобытия
То есть вначале идёт приставка "on ", а дальше название события , например, такие обработчики событий : onFocus , onClick , onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript? ". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.
a {
color: blue;
text-decoration: underline;
cursor: pointer;
}
var default_color = "white";
function setTempColor(color) {
document.bgColor = color;
}
function setDefaultColor(color) {
default_color = color;
}
function defaultColor() {
document.bgColor = default_color;
}
Белый
Жёлтый
Зелёный
Давайте разберёмся с этим скриптом, а точнее с уже целой HTML-страницой с поддержкой JavaScript и CSS (другими словами, это пример DHTML ). Вначале идут обычные HTML-теги , с которых начинается любая HTML-страница . Дальше мы создаём стиль, в котором требуем, чтобы все ссылки на данной странице были синего цвета, подчёркнутые, и чтобы указатель мыши на них был в виде "Pointer". Вы, возможно, скажите: "А зачем нужно задавать стиль? Ведь ссылки и так точно такими же и будут". Правильно, ссылки, но у нас ссылок как таковых нет (ведь нет же атрибута href в теге), поэтому они будут простым чёрным текстом по умолчанию (правда, кликать по тексту тоже можно). Поэтому стиль обязателен. Вы можете его убрать и посмотреть, что будет. А ещё лучше, поставьте атрибут href (с любым значением, хоть пустым) и объясните, почему скрипт перестал работать. Дальше уже начинается JavaScript . Мы создаём переменную default_color , отвечающую за цвет по умолчанию. Дальше идут три функции:
Функция setTempColor() отвечает за временное изменение цвета.
Функция setDefaultColor() отвечает за изменение цвета по умолчанию.
Функция defaultColor() устанавливает цвет фона по умолчанию.
Потом идут ссылки с атрибутами в виде обработчиков событий . При наведение мышки на ссылку возникает событие MouseOver , соответственно, обработчик события onMouseOver вызывает функцию setTempColor() и передаёт соответствующий параметр. При снятии мышки с элемента возникает событие MouseOut , а дальше вызывается функция defaultColor() , которая делает цветом фона цвет по умолчанию. И, наконец, при клике мышки по ссылке (обработчик onClick ) вызывается функция setDefaultColor() , которая устанавливает цвет заданный в параметре цветом фона по умолчанию. Как видите, всё достаточно просто.
Это был принцип использования событий в JavaScript , а дальше всё зависит только от Вашей фантазии!
В этом уроке мы создадим несколько проектов, в том числе самостоятельно выполняющуюся презентацию, которая использует события, связанные с кадрами.
В этом уроке :
- Изучение способов применения в скриптах обработчиков событий
- Определение наилучшего обработчика для вашей работы
- Использование событий мыши и кнопки для управления интерактивностью
- Добавление в проект управления с помощью клавиатуры
- Создание самопроигрывающейся презентации при помощи кадровых событий
- Использование событий фильма при создании интерактивного проекта
- Сочетание различных событий для выполнения нужной задачи
- Использование методов как обработчиков событий
- Слушатели и способы их применения
На выполнение этого урока требуется примерно два часа.
Файлы урокаФайлы-носители :
Стартовый файл :
Lesson02/Assets/MouseEvents1.fla Lesson02/Assets/FrameEvents1.fla Lesson02/Assets/ClipEvents1.fla Lesson02/Assets/OrchestratingEvents1.fla Lesson02/Assets/CarParts1.fla
Законченные проекты :
MouseEvents2.fla FrameEvents2.fla ClipEvents2.fla OrchestratingEvents2.fla CarParts2.fla
Что делают обработчики событийОбработчики событий ( event handlers ) – это оркестр, исполняющий интерактивную пьесу вашего фильма. Каждый обработчик содержит скрипт , выполняемый только тогда, когда происходит определенное событие. Каждый скрипт в фильме запускается событием – пользователь навел указатель мыши на кнопку или нажал клавишу, или фильм достиг определенного кадра на монтажном столе, и так далее.
В ActionScript обработчик события (за исключением событий, связанных с кадрами) обычно указан в первой строке всякого скрипта. Примерно так:
Когда происходит (типСобытия) { делать то-то; делать то-то; }
События, привязанные к кадрам, происходят, когда монтажный стол при воспроизведении достигает кадра, содержащего скрипт . Для скрипта, помещенного в кадр , не нужен обработчик события – такой скрипт будет выполнен при достижении данного кадра. Так, если бы приведенный выше скрипт был привязан к кадру, он выглядел бы так:
делать то-то; делать то-то;
Чем лучше вы поймете концепции обработчиков событий, тем более полным будет ваш контроль над интерактивными элементами. Правильно используя обработчики, вы сможете создать такую интерактивную среду, в которой пользователь будет чувствовать себя как дома.
Многие компьютерные программы позволяют пользователю перетаскивать элементы на экране, менять размер окон, делать те или иные настройки с помощью регуляторов, создавать собственные "шедевры искусства" при помощи виртуальных инструментов. Все эти режимы интерактивного взаимодействия зависят от того, как реализована в программном обеспечении обработка различных событий (нажатий кнопок мыши, перемещения мыши, ввода с клавиатуры и т.п.).
Выбор нужного обработчикаПравильное использование обработчиков событий – одна из наиболее сложных проблем, стоящих перед пользователем ActionScript , ведь большинство из нас не задумывается о том, как именно и почему происходят события вокруг нас. А ведь при создании интерактивной среды важно именно это – четко представлять себе, что с чем и как взаимодействует.
Знакомя вас с обработчиками событий Flash , мы будем рассматривать их связь с событиями реального мира. Не забывайте, что во Flash каждому событию соответствует действие (и ответная реакция ).
События мышиОбработчики этой группы управляют выполнением скриптов для событий, связанных с манипуляциями мышью над экранными кнопками и экземплярами фильмов-символов.
Примечание Если вы знакомы с реализацией событий мыши во Flash 5, то знаете, что там их можно было применять только к кнопкам. Во Flash MX же события мыши можно присоединять также к экземплярам фильмов-символов (об этом будет детально рассказано в упражнении).
Нажатие, контакт: on (press)
В реальном мире, если вы к чему-то прикасаетесь или на что-то нажимаете (будь то человек или кубик льда), вы ожидаете реакции: кубик льда начинает таять, человек тоже так или иначе откликается. Обработчик события on(press) служит для имитации событий вроде прикосновений, захватов, нажатий. Этот обработчик используется для запуска скрипта в ситуации, когда указатель наведен на кнопку или фильм-символ и кнопка мыши нажата.
Отпускание, освобождение: on (release)
Отпуская что-либо, прекращая контакт, вы обычно тем самым завершаете взаимодействие с предметом. Данный обработчик имитирует всякого рода освобождение – от нажатия или захвата . Применяется для запуска скрипта в ситуации, когда пользователь отпустил кнопку мыши (которую он до этого нажал на кнопке или экземпляре фильма-символа).
Сдвиг, перетаскивание: on (releaseOutside)Вообразите колоду карт, лежащую на столе. Вы нажимаете пальцем на верхнюю карту, сдвигаете ее с колоды и отпускаете палец. Во Flash вы можете представить себе кнопку, которую пользователь нажал, переместил мышь и отпустил кнопку. Этот обработчик запускает скрипт в случае, когда пользователь нажал кнопку мыши на объекте (экранной кнопке или фильме-символе), а отпустил за пределами объекта – полезно для программирования всякого рода перемещений и сдвигов.
Управление с клавиатуры: on (keyPress)Этим событием можно запрограммировать скрипт, который будет выполняться при нажатии пользователем какой-либо клавиши на клавиатуре. Клавишу можно задать любую – с буквой, цифрой, знаками препинания и
Обработка событий
Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования веб-браузер генерирует событие, когда с документом или некоторым его элементом что-то происходит. Например, веб-браузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре.
Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом - они постоянно ожидают, пока что-то произойдет (т.е. ждут появления событий), и откликаются на происходящее.
Тип события - это строка, определяющая тип действия, вызвавшего событие. Тип «mousemove», например, означает, что пользователь переместил указатель мыши. Тип «keydown» означает, что была нажата клавиша на клавиатуре. А тип «load» означает, что завершилась загрузка документа (или какого-то другого ресурса) из сети. Поскольку тип события - это просто строка, его иногда называют именем события.
Цель события - это объект, в котором возникло событие или с которым это событие связано. Когда говорят о событии, обычно упоминают тип и цель события. Например, событие «load» объекта Window или событие «click» элемента . Самыми типичными целями событий в клиентских приложениях на языке JavaScript являются объекты Window, Document и Element, но некоторые типы событий могут происходить и в других типах объектов.
Обработчик события - это функция, которая обрабатывает, или откликается на событие. Приложения должны зарегистрировать свои функции обработчиков событий в веб-браузере, указав тип события и цель. Когда в указанном целевом объекте возникнет событие указанного типа, браузер вызовет обработчик. Когда обработчики событий вызываются для какого-то объекта, мы иногда говорим, что браузер «возбудил» или «сгенерировал» событие.
Объект события - это объект, связанный с определенным событием и содержащий информацию об этом событии. Объекты событий передаются функции обработчика события в виде аргумента (кроме IE8 и более ранних версий, где объект события доступен только в виде глобальной переменной event). Все объекты событий имеют свойство type , определяющее тип события, и свойство target , определяющее цель события.
Для каждого типа события в связанном объекте события определяется набор свойств. Например, объект, связанный с событиями от мыши, включает координаты указателя мыши, а объект, связанный с событиями от клавиатуры, содержит информацию о нажатой клавише и о нажатых клавишах-модификаторах. Для многих типов событий определяются только стандартные свойства, такие как type и target, и не передается никакой дополнительной полезной информации. Для таких типов событий важно само наличие происшествия события, и никакая другая информация не имеет значения.
Распространение события - это процесс, в ходе которого браузер решает, в каких объектах следует вызвать обработчики событий. В случае событий, предназначенных для единственного объекта (таких как событие «load» объекта Window), надобность в их распространении отсутствует. Однако, когда некоторое событие возникает в элементе документа, оно распространяется, или «всплывает», вверх по дереву документа.