Target javascript что это

JavaScript свойство Event.target

Определение и применение

JavaScript свойство target объекта Event ссылается на объект, который отправил событие. Свойство доступно только для чтения.

Свойство currentTarget объекта Event в отличие от target всегда ссылается на элемент, к которому был присоединен обработчик события, а не на элемент, в котором произошло событие.

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

Поддержка браузерами

JavaScript синтаксис:

Версия JavaScript

Пример использования

В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент

При возникновении этого события срабатывает функция, которая выводит в консоль значение свойства currentTarget, которое соответствует текущему элементу DOM, в котором в настоящий момент обрабатывается событие и свойства target, которое ссылается на объект, который отправил событие.

Обратите внимание, что значения свойств будут отличаться, currentTarget всегда будет содержать элемент

Результат нашего примера:

Пример использования JavaScript свойства target и currentTarget объекта Event JavaScript Event

Источник

Простое объяснение делегирования событий в JavaScript

Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin

В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.

1. Почему делегирование событий?

Давайте напишем скрипт, который при нажатии на HTML-кнопку, будет отправлять сообщение в консоль.

Чтобы срабатывало такое поведение, необходимо в JavaScript найти эту кнопку и с помощью метода addEventListener() прикрепить к ней обработчик события.

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

А что, если возникает необходимость отслеживать события на множестве кнопок? Вот пример одного из способов реализаций:

Посмотреть, как работает данный способ, можно в демонстрации CodeSandbox

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

Существует ли лучший способ?

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

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

2. Распространение событий

Когда вы нажимаете на кнопку в следующей HTML-разметке:

Событие клика распространяется в 3 этапа:

Третий аргумент captureOrOptions метода addEventListener :

позволяет вам перехватывать события на разных этапах их распространения.

В следующем примере обработчик перехватывает событие клика на элементе на «Фазе захвата»:

В демонстрации CodeSandbox, при нажатии на кнопку, в консоли можно увидеть, как распространяется событие.

Итак, как распространение события помогает перехватывать события из множества кнопок?

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

3. Делегирование событий

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

Откройте демонстрационный код и кликните на любую кнопку – вы увидите в консоли сообщение «Click!».

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

Использование делегирования событий требует 3 шагов:

Шаг 1. Определить общего родителя элементов для отслеживания событий
В примере ниже

Шаг 2. Прикрепить к родительскому элементу обработчик событий
document.getElementById(‘buttons’).addEventListener(‘click’, handler) прикрепляет обработчик событий к родителю кнопок. Этот обработчик также реагирует на нажатия на кнопки, так как события нажатий на кнопки всплывают по всем элементам-предкам (благодаря распространению событий).

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

4. Резюме

Когда происходит событие нажатия на кнопку (или любое другое распространяющееся событие):

Механизм называется распространением события.

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

Для работы делегирования событий нужно 3 шага:

Источник

Форум

Справочник

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

В объекте события содержится подробнейшая информация о том, что и где произошло.

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

Тип события

Тип события можно получить, используя кроссбраузерное свойство type объекта событие.

Данный код в действии (в примере обрабатываются события click и mouseout ):

Элементы, связанные с событием

Элемент-триггер: target

Чаще всего нужно узнать, на каком элементе сработало событие.

Например, мы поймали на внешнем div ‘е и хотим знать, на каком из внутренних элементов оно на самом деле произошло.

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

Javascript-обработчик в примере висит только на внешнем диве d1 и выглядит примерно так:

Когда триггеров больше одного: relatedTarget

Для событий mouseout и mouseover предусмотрен способ получить как элемент на который курсор мыши перешел, так и элемент, с которого он перешел.

Текущий элемент: this

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

Сравнение подходов

Стандарт/Firefox

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

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

Кросс-браузерный код

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

Тест-стенд

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

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

Относительно окна

Относительно документа

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

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

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

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

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

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

Резюме

Вы узнали, как работают и как кросс-браузерно получить основные свойства объекта события:

Кроме того, увидели их в действии на демо.

Этих свойств хватает для 95% задач, связанных с событиями.

в опере правую не отследить

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

Спасибо. спасибо. Я к вам попал с википедии. То, что надо.

А почему так сложно? Почему нельзя просто

А статья действительно хорошая, спасибо.

Человек пытается понять, а вы налетели.
Поступаете еще глупее, чем он.

Потому что из-за таких, как ты, скрипты на сайтах работают только в ИЕ.

У автора есть проверка у тебя её нет

Из-за разных браузеров, в мозилле объект события event прочтется только если передан в обработчик в качестве параметра

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

да вроде обработчик повешен на mousemove и он при движении мышки меняет значения в полях на коорд мышки автоматом.

Мне кажется, с отслеживанием координат мышки автор слегка лукавит. Не спроста вызов MouseShowHandler остался за кадром. Там встречаются неизвестные всякие JQuery и AJAX. Очевидно, так просто из скрипта MouseMove не перехватить

Не паникуем, а учим матчасть тщательнее. Все так, как написано.

Ололо нубик. JavaScript выполняется на стороне клиента.
ы) jQuery AJAX и все такое гы гы гы.

i think you’re right, but I’ll have to make sure. thanks for sharing though. fencing santa fe nm

Почему в FireFox v3 «демо» для следующего хтмл кода не работает.

.headwindow <
background-color: #03F;
height: 20px;
width: auto;
>

div класс=»headwindow» онКлик=»mouseShowHandler()» /div

форма
инпут type=»text»
инпут type=»text»
/форма

div класс=»headwindow» онКлик=»mouseShowHandler()» /div
в этой строчке mouseShowHandler() введен без параметра, а в демо который ты взял сверху этот параметр есть, обрати внимание на определение function mouseShowHandler(e)

хочу уточнить что в IE window.event является readonly объектом и по этому чтобы код работал корректно нужно клонировать window.event с помощью встроенной IE функции var e=document.createEventObject(window.event)

А в него никто ничего и не пишет.

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

pageY = 750 если курсор будет в самом низу окна.
а если по середине т.к. мы скролл крутим, то сдвинеться на 250 px итого 500px

В том то и дело что мы скролим колёсиком а не двигаем мышку автор просто ошибся. 500 там будет pageY

А есть ли возможность передать событие родительскому элементу?

Например, есть обработчик события для параграфа в диве (на моуздаун). И дивов таких два. Могу ли я из этого обработчика узнать в каком диве параграф, на который щелкнули?

В этом обработчике можно взять target (srcElement).parentNode.
Или навесить обработчики на сами дивы а не на параграфы.

Столкнулся с тем, что relatedTarget или toElement не хотят работать в FF. Есть функция, вызываемая по onMouseOut с ячейки

function menu_out_main () <
var objTo = window.event.toElement
alert(objTo);
>

document.onmouseover = setupEffect();
document.onmouseout = cleanupEffect();

document.onmouseover = function()
document.onmouseout = function()

Также можно попробовать перехватывать события не из document, а из document.body

Не надо так пробовать

Ещё чего-то в памяти всплывает, что в FF event как особенно передаётся, типа:

document.onmouseover = setupEffect(event); // или setupEffect(), а event автоматом передаётся по значению в переменную «e», по экспериментируйте
document.onmouseout = cleanupEffect(event); // или cleanupEffect()

Сделайте так, чтобы можно было копировать код, представленный на ваших страницах, без 01 02 03 04 и так далее.

Там есть кнопка для этого

document.onclick = function(e)
<
var MouseCoords = mousePageXY(e);
document.getElementById(‘CursorX’).value = MouseCoords.x;
document.getElementById(‘CursorY’).value = MouseCoords.y;
>

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

Ребят, сколько ни ковыряю, что-то не могу разобрать. Можно ли самому создать такое событие, которое устанавливает значения ClientX/ClientY (pageX/pageY), а не просто получает их? Подскажите, для примера, функцию, автоматизирующую некоторое перетаскивание:
1. Устанавливаются заданные координаты Х,Y (150, 250)
2. Происходит нажатие левой кнопки мыши
3. Устанавливаются другие координаты (200,300)
4. Происходит отпускание кнопки
Это бы всё расставило на свои места, заранее благодарю.

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

Умно!
А как программно подвинуть курсор мыши?
Второй вопрос как программно нажать кнопки на мыши?
можно какиенибудь не затейливые примерчики .

просто
invoke mouse_event, 7h, xMove, yMove, NULL, NULL
Но не в браузере и не в джаве)

А как в ИЕ получить значение позиции курсора мыши относительно элемента? В FF для этих целей используется свойство event.layerX, а в ИЕ?

Тип события можно получить, используя кроссбраузерное свойство type объекта событие.

1 function getEventType(e) <
2 if (!e) e = window.event;
3 alert(e.type);
4 >
Данный код в действии (в примере обрабатываются события click и mouseout):
недопонял, как этот код обрабатывает событие, ведь так тоже обработка произойдет:
/ input value=»определение» onmouseout=»alert(‘mouseout’);» onclick=»alert(‘click’);» type=»button» /

Ваш последний пример, как я понял, перехватывает событие mousemove, по этому он становится не совсем наглядным для демонстрации PageX/PageY при скроллинге и недвижимой мышке.

Автор забыть указать Важный момент, что он использовал метод вызова на jq

Если кому интересно без jq, то делается это следующим образом в body прописывается функция onmousemove.

Что за бред? Причем тут вообще jQuery. Попытка съумничать не засчитана.

Необходимо уточнение: для Firefox в обязательно прописать

На FireFox 4 на сдешней странице всё нормально, а отдельно код с определением места курсора не идет. Почему и как исправить?

Здравствуйте!
Можете объяснить принцип работы переменной this
Как я понимаю это что-то на подобии event. Он будет вноситься в функцию первым аргументом или вторым если в аргументах есть event.
А далее можно будет не прописывать
var X=document.getElementById.
а просто
this.style.color... например для смены цвета объекта на котором сработал обработчик

this это указатель на объект, вызвавший событие, передавать в качестве параметра его не обязательно

function getEventType(e) <
if (!e) e = window.event;
alert(e.type);
>

Автор, пожалуйста, будь так добр пояснить сий «трюк». Что за чёртова буква «e»? Как это вообще работает? Почему в финальном демо при назначение функции обработчиком события она работает? Как? Откуда она берёт параметр e для своей работы, если эта функция нигде не вызывается и никто ей не передаёт параметров?
Если это особенность вызова функции без параметров, тогда как в её описание/определение аргументы всё же указаны, то следовало бы указать эту деталь.

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

Простите мне мою горячность, но статья без пояснения вышеописанной детали бред. Я прочитал всю статью. Рылся в интернете. И так за 2 дня не понял весь механизм работы демо в финале статьи. Я в ярости.

Спасибо, что терпеливо прочитали мои возмущения. Пожалуйста. Обойдетесь без бессмысленных ответов. Я перечитал все комментарии к этой статье. Из низ 90% бессмысленны и не отвечают на поставленные вопросы полноценным образом.

$(‘#’+contId+’ div.tabs ul.tabNavigation a’).click(function () <
tabContainers.hide();
tabContainers.filter(this.hash).show();
$(‘#’+contId+’ div.tabs ul.tabNavigation a’).removeClass(‘selected’);
$(this).addClass(‘selected’);
return false;
>).filter(‘:ID’).click();
>

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

лучше б вы показали как отслеживать положение экрана относительно документа

Совсем ничего не получается, устал.

координаты определяются и в ИЕ и в Опере, но только не в FF ((((

помогите, пожалуйста. что я не так делаю?

вот тестовая страница: killarney.ru/event-test2.htm

Для файрфокса тег body должен выглядеть так:

А можно получить координаты относительно какого-нибудь блока?

Для этого Вам нужно воспользоватся AJAX запросом, которым Вы передаете на серверную сторону координаты, и уже php на серверной стороне запишет их в нужный файл.

Не могу понять почему в Опере 12 нажатие на среднюю кнопку (колесико) не вызывает срабатывания onmousedown/ что за фича такая? И можно это поправить? Ответьте, уважаемые знатоки Java Script.

Друзья, с clientX и clientY не все так радужно, как описано в статье.
Они одинаково поддерживается всеми браузерами.

Это не правда. Если быть точным, это не для всех событий правда.
Например, мне надо было отследить положение курсора во время скроллинга. Мне нужно только свойство clientX. Так вот у события onscroll этого свойства в FF не обнаружилось. И на планшетном (сенсорном) Chrome, хотя на виндузовом Chrome все работает.

Тема статьи «Свойства объекта событие», но, почему-то, ничего не сказано, например, о событии «onkeypress». =( грустно.

Хорошая статья, спасибо =) Мне очень пригодилось при написании событий клика мышью по объектам.

кто может разшифровать эту строку?)

Кроссбраузерный(т.к. IE работает не по стандартам W3C) способ получения элемента на который перешел курсор мыши при событии mouseout.

Если не понимаешь саму строку, тогда учи краткую запись If.

Мышка-клавиатура-загрузка_страницы это чудно. Но что насчёт событий tap&swipe? Заранее благодарен.

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

А если мне нужно вторым аргументом callback передать, как это сделать не трогая event который идет первым аргументом?

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

А маргинами не пробовал?

Не получается отследить клики по дочерним элементам целевого элемента

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

Источник

Свойства и методы объекта события в 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 показывать в верхней части экрана сообщение.

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

Источник