Event preventdefault что это

Действия браузера по умолчанию

Многие события автоматически влекут за собой действие браузера.

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

Отмена действия браузера

Есть два способа отменить действие браузера:

В следующем примере при клике по ссылке переход не произойдёт:

Обычно значение, которое возвращает обработчик события, игнорируется.

В других случаях return не нужен, он никак не обрабатывается.

Пример: меню

Рассмотрим меню для сайта, например:

Данный пример при помощи CSS может выглядеть так:

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

Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.

Опция «passive» для обработчика

Почему это может быть полезно?

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

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

Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.

event.defaultPrevented

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?

Давайте посмотрим практический пример.

По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.

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

Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать event.stopPropagation() :

Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.

Как мы можем видеть, event.stopPropagation() и event.preventDefault() (также известный как return false ) – это две разные функции. Они никак не связаны друг с другом.

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

Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.

Итого

Действий браузера по умолчанию достаточно много:

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

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

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

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

Источник

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

Действия браузера по умолчанию

Имеется много различных событий, при наступлении которых браузер выполняет определённые стандартные действия:

Отмена стандартного действия браузера

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

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

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

В этом разделе мы рассмотрим следующий вопрос: «Влияет ли на всплытие события то, что мы отменили выполнение стандартного действия браузера, которое с ним связано?»

Чтобы разобраться в этом вопросе, давайте рассмотрим следующий пример:

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

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

Источник

Генерация пользовательских событий

Можно не только назначать обработчики, но и генерировать события из JavaScript-кода.

Пользовательские события могут быть использованы при создании графических компонентов. Например, корневой элемент нашего меню, реализованного при помощи JavaScript, может генерировать события, относящиеся к этому меню: open (меню раскрыто), select (выбран пункт меню) и т.п. А другой код может слушать эти события и узнавать, что происходит с меню.

Конструктор Event

Встроенные классы для событий формируют иерархию аналогично классам для DOM-элементов. Её корнем является встроенный класс Event.

Событие встроенного класса Event можно создать так:

По умолчанию все три свойства установлены в false: .

Метод dispatchEvent

В примере ниже событие click инициируется JavaScript-кодом так, как будто кликнули по кнопке:

Можно легко отличить «настоящее» событие от сгенерированного кодом.

Свойство event.isTrusted принимает значение true для событий, порождаемых реальными действиями пользователя, и false для генерируемых кодом.

Пример всплытия

Всё, что нужно сделать – это установить флаг bubbles в true :

Механизм всплытия идентичен как для встроенного события ( click ), так и для пользовательского события ( hello ). Также одинакова работа фаз всплытия и погружения.

MouseEvent, KeyboardEvent и другие

Для некоторых конкретных типов событий есть свои специфические конструкторы. Вот небольшой список конструкторов для различных событий пользовательского интерфейса, которые можно найти в спецификации UI Event:

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

Например, clientX/clientY для события мыши:

Полный список свойств по типам событий вы найдёте в спецификации, например, MouseEvent.

Пользовательские события

Свойство detail может содержать любые данные. Надо сказать, что никто не мешает и в обычное new Event записать любые свойства. Но CustomEvent предоставляет специальное поле detail во избежание конфликтов с другими свойствами события.

event.preventDefault()

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

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

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

Посмотрим практический пример – прячущегося кролика (могло бы быть скрывающееся меню или что-то ещё).

Вложенные события обрабатываются синхронно

Исключением является ситуация, когда событие инициировано из обработчика другого события.

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

В примере ниже событие menu-open обрабатывается синхронно во время обработки onclick :

Порядок вывода: 1 → вложенное событие → 2.

Новый порядок вывода: 1 → 2 → вложенное событие.

Итого

Чтобы сгенерировать событие из кода, вначале надо создать объект события.

Базовый конструктор Event(name, options) принимает обязательное имя события и options – объект с двумя свойствами:

Весьма часто, когда разработчик хочет сгенерировать встроенное событие – это вызвано «кривой» архитектурой кода.

Как правило, генерация встроенных событий полезна в следующих случаях:

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

Источник

Объект Event

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

Для доступа к объекту события функцию-обработчик следует назначать с указанием одного аргумента. В него будет передана ссылка на объект события.

При назначении через HTML-атрибут объект события доступен по ссылке event. Для однотипности кода лучше всегда использовать переменную event для объекта события.

В IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event.
Универсальное решение для получения объекта события:

bubbles

Свойство bubbles указывает, является ли данное событие всплывающим внутри DOM.

Синтаксис

Возвращаемое значение

Комментарии

Совместимость с браузерами

Да	9,0	Да	Да	Да

cancelable

Свойство cancelable указывает, является ли событие отменяемым.

Синтаксис

Возвращаемое значение

Совместимость с браузерами

Да	9,0	Да	Да	Да

clipboardData

Значением свойства clipboardData является объект, обеспечивающий доступ к системному буферу сохранения.

Синтаксис

Возвращаемое значение

объект, обеспечивающий доступ к системному буферу сохранения. Буфер сохранения поддерживает пять форматов хранения данных, которые в DHTML обозначаются так:

Этот объект не имеет свойств и поддерживает следующие методы:

Совместимость с браузерами

Да	6+	22+	Да	Да

currentTarget

Свойство currentTarget определяет текущий элемент DOM дерева, на котором в данный момент выполняется обработчик события.

Синтаксис

Возвращаемое значение

Ссылка на текущий зарегистрированный объект, на котором обрабатывается событие.

Комментарии

Фактически, currentTarget содержит ссылку на тот же элемент, что и this.

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

Совместимость с браузерами

Да	9,0	Да	Да	Да

Пример

defaultPrevented

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

Синтаксис

Возвращаемое значение

boolean-значение, информирующее о том, был ли вызван event.preventDefault() в текущем обработчике события:

Совместимость с браузерами

Да	9,0	Да	Да	Да

eventPhase

Свойство eventPhase отображает текущую фазу процесса обработки события.

Синтаксис

Возвращаемое значение

Целое число, которое соответствует стадии обработки:

Совместимость с браузерами

Да	9,0	Да	Да	Да

isTrusted

Свойство isTrusted содержится информация о том, кем вызвано событие.

Синтаксис

Возвращаемое значение

Совместимость с браузерами

46,0	9,0	Да	Нет	33,0

Пример

preventDefault()

Метод preventDefault() отменяет событие, если оно отменяемое, без остановки дальнейшего распространения этого события.

Синтаксис

Комментарии

Отменить действия браузера по умолчанию можно простым вызовом «return false» в конце обработчика. Но это можно использовать только внутри обработчиков, установленных через HTML-атрибут или DOM-свойство. Если обработчик устанавливается с помощью метода addEventListener(), тогда вызов «return false» ни к чему не приведёт. Универсальным способом для отмены действий браузера по умолчанию является встроенный метод preventDefault().

Вызов preventDefault() во время любой стадии обработки события отменяет действия браузера. Действия назначенных обработчиков данный метод не отменяет.

Действия браузера можно отменить не для всех событий. Вызов preventDefault() на неотменяемом событии результата не даст.

Информацию о состоянии браузерных действий можно получить из булевых свойств: cancelable, defaultPrevented.

Пример

В получившемся поле нельзя ввести текст, используя клавиатуру.

Совместимость с браузерами

Да	9,0	Да	Да	Да

В IE8- для отмены действия по умолчанию нужно назначить свойство event.returnValue = false.

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

stopImmediatePropagation()

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

Синтаксис

Комментарии

Если одному элементу на одно событие назначено несколько обработчиков, то они выполняются в порядке назначения. Если один из них вызывает метод stopImmediatePropagation(), тогда оставшиеся обработчики не выполняются. Дальнейшее распространение события не происходит.

Метод stopImmediatePropagation() не отменяет действия браузера по умолчанию.

Пример

Первый обработчик элемента

Совместимость с браузерами

Да	9,0	Да	Да	Да

Кросс-браузерно остановить всплытие можно так:

target

Свойство target содержит ссылку на тот элемент, на котором было вызвано событие.

Синтаксис

Возвращаемое значение

Ссылка на элемент, на котором было вызвано событие.

Комментарии

Значение target отличается от currentTarget, если обработчик выполняется на стадии перехвата или всплытия.

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

Пример

В данном примере клик на любом элементе списка удаляет его. При этом скрипт использует всего один обработчик. Особенно это полезно, когда список элементов заведомо не известен, а создаётся динамически.

Совместимость с браузерами

Да	9,0	Да	Да	Да

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

timeStamp

Свойство timeStamp возвращает точное время, когда произошло событие

Синтаксис

Возвращаемое значение

Количество миллисекунд, прошедших с начала эпохи Unix (1 января 1970 года по Гринвичу).

Совместимость с браузерами

Да	9,0	Да	Да	Да

Пример

Свойство type содержится название события (click, keypress и т.п.).

Источник

Свойства и методы объекта события в JavaScript

Как получить информацию о событии?

Получить детальную информацию о событии в обработчике можно посредством объекта события ( Event ). Данный объект создаёт браузер, когда это событие происходит. В него он помещает много различной информации. Например, для события click : какая клавиша нажата, координаты курсора и др.

Объект события в соответствии со стандартом всегда передаётся обработчику посредством первого аргумента:

Например, выведем детальную информацию в консоль при клике на элемент:

Свойства и методы объекта события

Свойства объекта Event :

Методы объекта Event :

Свойства объекта события MouseEvent

Например, получим координаты курсора при перемещении по документу (событие mousemove ):

Так как в разметке элементы вложены друг в друга, то курсор в большинстве случаев всегда находится одновременно над несколькими элементами. Но взаимодействие всегда осуществляется с тем, кто расположен глубже других (т.е. ближе к нам по оси Z). Если элементы находятся не в основном потоке, то в этом случае с тем, у кого больше значение свойства z-index. Но если элементы имеют одинаковое значение z-index, то тогда ближе к нам будет уже тот, кто из них глубже расположен.

Например, при движении мыши будем выводить информацию о элементе (его значение id ), который в данный момент создаёт событие mousemove :

Свойства объекта события KeyboardEvent

Объект KeyboardEvent позволяет обрабатывать взаимодействия пользователя с клавиатурой:

Отличие target от currentTarget

События в браузере по умолчанию всплывают. Из-за этого:

Например, рассмотрим этот код:

Использование target и relatedTarget

Свойство relatedTarget предназначено для определения дополнительной цели, связанной с событием.

Задачи

1. Удаление элемента при клике на нем

Необходимо написать JavaScript сценарий, который будет при клике на элементе удалять его из DOM.

2. Перемещение блока с помощью клавиш «WASD»

Нужно создать код, который будет при нажатии клавиш «WASD» перемещать элемент #box по странице.

3. Одновременное нажатие кнопок

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

Создаваемое сообщение должно иметь следующую разметку:

Источник