События презентация

Браузерные события
Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).
События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.
События на элементах управления:
submit – пользователь отправил форму
.
focus – пользователь фокусируется на элементе, например нажимает на
.
Клавиатурные события:
keydown и keyup – когда пользователь нажимает / отпускает клавишу.
События документа:
DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.
CSS events:
transitionend – когда CSS-анимация завершена.

Обработчики событий
Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.
Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.
Есть несколько способов назначить событию обработчик.
Использование атрибута HTML
Использование свойства DOM-объекта
обработчиком можно назначить и уже существующую функцию:

Доступ к элементу через this
Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.
addEventListener
event Имя события, например "click".
handler Ссылка на функцию-обработчик.
options Дополнительный объект со свойствами:
Cвойства:
once: если true, тогда обработчик будет автоматически удалён после выполнения.
capture: фаза, на которой должен сработать обработчик (подробнее в теме Всплытие и погружение)
passive: если true, то указывает, что обработчик никогда не вызовет preventDefault() (подробнее Действия браузера по умолчанию)

Для удаления обработчика следует использовать removeEventListener:
Для удаления нужно передать именно ту функцию-обработчик которая была назначена.
Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Объект события
Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.
Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.
Пример ниже демонстрирует получение координат мыши из объекта события:
Некоторые свойства объекта event:
event.type Тип события, в данном случае "click".
event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.
event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

Объект-обработчик: handleEvent
Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.
К примеру:
если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event), когда происходит событие.

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, нужно явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup,

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

Всплытие и погружение
Всплытие
Принцип всплытия очень простой.
Когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Клик по внутреннему
вызовет обработчик onclick:
Сначала на самом
.
Потом на внешнем
.
Затем на внешнем .
И так далее вверх по цепочке до самого document.

event.target
Всегда можно узнать, на каком конкретно элементе произошло событие.
Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через event.target.
Отличия от this (=event.currentTarget):
event.target – это «целевой» элемент, на котором произошло событие, в процессе всплытия он неизменен.
this – это «текущий» элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.
Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента , на котором сработает обработчик.
При этом внутри обработчика form.onclick:
this (=event.currentTarget) всегда будет элемент , так как обработчик сработал на ней.
event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик.
Возможна и ситуация, когда event.target и this – один и тот же элемент, например, если клик был непосредственно на самом элементе , а не на его подэлементе.

Прекращение всплытия
Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента , а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.
Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.
Для этого нужно вызвать метод event.stopPropagation().
Например, здесь при клике на кнопку
обработчик body.onclick не сработает:

Погружение
Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.
Стандарт DOM Events описывает 3 фазы прохода события:
Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
Фаза всплытия (bubbling stage) – событие начинает всплывать.
Картинка из спецификации демонстрирует, как это работает при клике по ячейке , расположенной внутри таблицы:
То есть при клике на событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.

Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент capture вот так:
Существуют два варианта значений опции capture:
Если аргумент false (по умолчанию), то событие будет поймано при всплытии.
Если аргумент true, то событие будет перехвачено при погружении.
Здесь обработчики навешиваются на каждый элемент в документе, чтобы увидеть в каком порядке они вызываются по мере прохода события.
Если вы кликните по
, то последовательность следующая:
HTML → BODY → FORM → DIV (фаза погружения, первый обработчик)
P (фаза цели, срабатывают обработчики, установленные и на погружение и на всплытие, так что выведется два раза)
DIV → FORM → BODY → HTML (фаза всплытия, второй обработчик)

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

Вместо того, чтобы назначать обработчик onclick для каждой ячейки (их может быть очень много) – можно повесить «единый» обработчик на элемент .
Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его.
Код будет таким:
Слайд 17
Передвиньте мяч по полю
Пусть мяч перемещается при клике на поле, туда,
куда был клик
Требования:
Центр мяча должен совпадать с местом нажатия мыши (если это возможно без пересечения краёв поля);
CSS-анимация желательна, но не обязательна;
Мяч ни в коем случае не должен пересекать границы поля;
При прокрутке страницы ничего не должно ломаться;
Заметки:
Код должен уметь работать с различными размерами мяча и поля, не привязываться к каким-либо фиксированным значениям.
Используйте свойства event.clientX/event.clientY для определения координат мыши при клике.
https://plnkr.co/edit/gRBZystyjxJU5Tc5?p=preview&preview
Имя файла: События.pptx
Количество просмотров: 8
Количество скачиваний: 0
Скачать
- Предыдущая
SCR - Система каталитического восстановления выхлопных газов на двигателях Weichai Euro 4 & 5
Следующая -
Инновационная экономика и технологическое предпринимательство (шаблон)
Похожие презентации
SIMATIC S7 Siemens AG 2000. All rights reserved
Ақпараттық – коммунмкациялық технологиялар
Основы С#. Платформа Microsoft.NET. Основные понятия. Пространство имен. (Лекция 1)
Алгоритм. Свойства алгоритма. Исполнители
Информационная безопасность
Технічне завдання. ДСТУ 19.201-78 Технічне завдання. Вимоги до змісту та оформленню
Роль информатизации и цифровизации системы здравоохранения в эффективности управления и оказания медицинской помощи
Жанр компьютерных игр - шутер
Методы анализа текста в R
Test automation
Верстка web-страниц. Стили
Объектно-ориентированный анализ и проектирование
Экспертные рекомендации по оптимизации сайтов компании ENER INVEST
Конечные автоматы. (Лекция 5)
Цели, задачи и основы JavaScript
Урок информатики Компьютерная помощница- мышь
Образовательный комплекс Компьютерные сети. Модель ISOOSI
Основы архитектуры операционных систем
Разработка игры QUICK
Презентация по теме Файловая технология организации данных в современных ПК
Обучение по функционалу 3-9%
Software Developers Conference New York City
Аренда 1С. Облачный сервис Аренда 1С
Требования к структуре и формату презентации проектов, представляемых на интерактивных сессиях
Сжатие файлов. Архиваторы
Boutique Hotel Social Media
Программирование на языке Python. Символьные строки
Информационные модели на графах. Разработка урока с презентациями.
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:580281,name:m,category:G,count:H,jpg:"jpg\u002F580281",hits:I,download:b,h1:"События презентация",meta:{h1:m,title:m,description:"События презентация на тему, доклад, Информатика",keywords:"События, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему События из раздела Информатика. Презентация на заданную тему содержит 18 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:a,file:"События.pptx",texts:["\u003Cp\u003EСобытия\u003Cbr\u003E","\u003Cp\u003EБраузерные события\u003Cbr\u003EСобытие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).\u003Cbr\u003EСобытия мыши:\u003Cbr\u003Eclick – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).\u003Cbr\u003Econtextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.\u003Cbr\u003Emouseover \u002F mouseout – когда мышь наводится на \u002F покидает элемент.\u003Cbr\u003Emousedown \u002F mouseup – когда нажали \u002F отжали кнопку мыши на элементе.\u003Cbr\u003Emousemove – при движении мыши.\u003Cbr\u003EСобытия на элементах управления:\u003Cbr\u003Esubmit – пользователь отправил форму \u003Cform\u003E.\u003Cbr\u003Efocus – пользователь фокусируется на элементе, например нажимает на \u003Cinput\u003E.\u003Cbr\u003EКлавиатурные события:\u003Cbr\u003Ekeydown и keyup – когда пользователь нажимает \u002F отпускает клавишу.\u003Cbr\u003EСобытия документа:\u003Cbr\u003EDOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.\u003Cbr\u003ECSS events:\u003Cbr\u003Etransitionend – когда CSS-анимация завершена.\u003Cbr\u003E","\u003Cp\u003EОбработчики событий\u003Cbr\u003EСобытию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.\u003Cbr\u003EИменно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.\u003Cbr\u003EЕсть несколько способов назначить событию обработчик. \u003Cbr\u003E\u003Cp\u003EИспользование атрибута HTML\u003Cbr\u003E\u003Cp\u003EИспользование свойства DOM-объекта\u003Cbr\u003E\u003Cp\u003Eобработчиком можно назначить и уже существующую функцию:\u003Cbr\u003E","\u003Cp\u003EДоступ к элементу через this\u003Cbr\u003E\u003Cp\u003EВнутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.\u003Cbr\u003E\u003Cp\u003EaddEventListener\u003Cbr\u003E\u003Cp\u003Eevent Имя события, например \"click\".\u003Cbr\u003Ehandler Ссылка на функцию-обработчик.\u003Cbr\u003Eoptions Дополнительный объект со свойствами:\u003Cbr\u003E\u003Cp\u003ECвойства:\u003Cbr\u003Eonce: если true, тогда обработчик будет автоматически удалён после выполнения.\u003Cbr\u003Ecapture: фаза, на которой должен сработать обработчик (подробнее в теме Всплытие и погружение)\u003Cbr\u003Epassive: если true, то указывает, что обработчик никогда не вызовет preventDefault() (подробнее Действия браузера по умолчанию)\u003Cbr\u003E","\u003Cp\u003EДля удаления обработчика следует использовать removeEventListener:\u003Cbr\u003E\u003Cp\u003EДля удаления нужно передать именно ту функцию-обработчик которая была назначена.\u003Cbr\u003E\u003Cp\u003EМетод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:\u003Cbr\u003E","\u003Cp\u003EОбъект события\u003Cbr\u003EЧтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.\u003Cbr\u003EКогда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.\u003Cbr\u003EПример ниже демонстрирует получение координат мыши из объекта события:\u003Cbr\u003E\u003Cp\u003EНекоторые свойства объекта event:\u003Cbr\u003Eevent.type Тип события, в данном случае \"click\".\u003Cbr\u003Eevent.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget.\u003Cbr\u003Eevent.clientX \u002F event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.\u003Cbr\u003E","\u003Cp\u003EОбъект-обработчик: handleEvent\u003Cbr\u003EМы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener. В этом случае, когда происходит событие, вызывается метод объекта handleEvent.\u003Cbr\u003EК примеру:\u003Cbr\u003E\u003Cp\u003E если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event), когда происходит событие.\u003Cbr\u003E","\u003Cp\u003EЗдесь один и тот же объект обрабатывает оба события. Обратите внимание, нужно явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup, \u003Cbr\u003E","\u003Cp\u003EМетод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий\u003Cbr\u003E","\u003Cp\u003EВсплытие и погружение\u003Cbr\u003E\u003Cp\u003EВсплытие\u003Cbr\u003EПринцип всплытия очень простой.\u003Cbr\u003EКогда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.\u003Cbr\u003E\u003Cp\u003EКлик по внутреннему \u003Cp\u003E вызовет обработчик onclick:\u003Cbr\u003EСначала на самом \u003Cp\u003E.\u003Cbr\u003EПотом на внешнем \u003Cdiv\u003E.\u003Cbr\u003EЗатем на внешнем \u003Cform\u003E.\u003Cbr\u003EИ так далее вверх по цепочке до самого document.\u003Cbr\u003E","\u003Cp\u003Eevent.target\u003Cbr\u003EВсегда можно узнать, на каком конкретно элементе произошло событие.\u003Cbr\u003EСамый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через event.target.\u003Cbr\u003EОтличия от this (=event.currentTarget):\u003Cbr\u003Eevent.target – это «целевой» элемент, на котором произошло событие, в процессе всплытия он неизменен.\u003Cbr\u003Ethis – это «текущий» элемент, до которого дошло всплытие, на нём сейчас выполняется обработчик.\u003Cbr\u003EНапример, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента \u003Cform\u003E, на котором сработает обработчик.\u003Cbr\u003EПри этом внутри обработчика form.onclick:\u003Cbr\u003Ethis (=event.currentTarget) всегда будет элемент \u003Cform\u003E, так как обработчик сработал на ней.\u003Cbr\u003Eevent.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик.\u003Cbr\u003E\u003Cp\u003EВозможна и ситуация, когда event.target и this – один и тот же элемент, например, если клик был непосредственно на самом элементе \u003Cform\u003E, а не на его подэлементе.\u003Cbr\u003E","\u003Cp\u003EПрекращение всплытия\u003Cbr\u003EВсплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента \u003Chtml\u003E, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.\u003Cbr\u003EНо любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.\u003Cbr\u003EДля этого нужно вызвать метод event.stopPropagation().\u003Cbr\u003EНапример, здесь при клике на кнопку \u003Cbutton\u003E обработчик body.onclick не сработает:\u003Cbr\u003E","\u003Cp\u003EПогружение\u003Cbr\u003EСуществует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.\u003Cbr\u003EСтандарт DOM Events описывает 3 фазы прохода события:\u003Cbr\u003EФаза погружения (capturing phase) – событие сначала идёт сверху вниз.\u003Cbr\u003EФаза цели (target phase) – событие достигло целевого(исходного) элемента.\u003Cbr\u003EФаза всплытия (bubbling stage) – событие начинает всплывать.\u003Cbr\u003EКартинка из спецификации демонстрирует, как это работает при клике по ячейке \u003Ctd\u003E, расположенной внутри таблицы:\u003Cbr\u003E\u003Cp\u003EТо есть при клике на \u003Ctd\u003E событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.\u003Cbr\u003E","\u003Cp\u003EЧтобы поймать событие на стадии погружения, нужно использовать третий аргумент capture вот так:\u003Cbr\u003E\u003Cp\u003EСуществуют два варианта значений опции capture:\u003Cbr\u003EЕсли аргумент false (по умолчанию), то событие будет поймано при всплытии.\u003Cbr\u003EЕсли аргумент true, то событие будет перехвачено при погружении.\u003Cbr\u003E\u003Cp\u003EЗдесь обработчики навешиваются на каждый элемент в документе, чтобы увидеть в каком порядке они вызываются по мере прохода события.\u003Cbr\u003EЕсли вы кликните по \u003Cp\u003E, то последовательность следующая:\u003Cbr\u003EHTML → BODY → FORM → DIV (фаза погружения, первый обработчик)\u003Cbr\u003EP (фаза цели, срабатывают обработчики, установленные и на погружение и на всплытие, так что выведется два раза)\u003Cbr\u003EDIV → FORM → BODY → HTML (фаза всплытия, второй обработчик)\u003Cbr\u003E","\u003Cp\u003EДелегирование событий\u003Cbr\u003EВсплытие и перехват событий позволяет реализовать один из самых важных приёмов разработки – делегирование.\u003Cbr\u003EИдея в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому, мы ставим один обработчик на их общего предка.\u003Cbr\u003EИз него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.\u003Cbr\u003E\u003Cp\u003Eзадача – реализовать подсветку ячейки \u003Ctd\u003E при клике.\u003Cbr\u003E","\u003Cp\u003EВместо того, чтобы назначать обработчик onclick для каждой ячейки \u003Ctd\u003E (их может быть очень много) – можно повесить «единый» обработчик на элемент \u003Ctable\u003E.\u003Cbr\u003EОн будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его.\u003Cbr\u003EКод будет таким:\u003Cbr\u003E","\u003Cp\u003EПередвиньте мяч по полю\u003Cbr\u003EПусть мяч перемещается при клике на поле, туда, куда был клик\u003Cbr\u003EТребования:\u003Cbr\u003EЦентр мяча должен совпадать с местом нажатия мыши (если это возможно без пересечения краёв поля);\u003Cbr\u003ECSS-анимация желательна, но не обязательна;\u003Cbr\u003EМяч ни в коем случае не должен пересекать границы поля;\u003Cbr\u003EПри прокрутке страницы ничего не должно ломаться;\u003Cbr\u003EЗаметки:\u003Cbr\u003EКод должен уметь работать с различными размерами мяча и поля, не привязываться к каким-либо фиксированным значениям.\u003Cbr\u003EИспользуйте свойства event.clientX\u002Fevent.clientY для определения координат мыши при клике.\u003Cbr\u003Ehttps:\u002F\u002Fplnkr.co\u002Fedit\u002FgRBZystyjxJU5Tc5?p=preview&preview \u003Cbr\u003E","\u003Cp\u003EДобавить кнопку закрытия\u003Cbr\u003EЕсть список сообщений.\u003Cbr\u003EПри помощи JavaScript для каждого сообщения добавьте в верхний правый угол кнопку закрытия.\u003Cbr\u003Ehttps:\u002F\u002Fplnkr.co\u002Fedit\u002FwwVsnFXjnkZ1We9m?p=preview&preview \u003Cbr\u003E\u003Cp\u003EСпрячьте сообщения с помощью делегирования\u003Cbr\u003EДан список сообщений с кнопками для удаления [x]. Заставьте кнопки работать.\u003Cbr\u003Ehttps:\u002F\u002Fplnkr.co\u002Fedit\u002F7n3obk1PsA8VrNOs?p=preview&preview \u003Cbr\u003E"],href:"\u002Finformatika\u002Fsobytiya-1944",href_category:"\u002Finformatika",date:1677739230,related:[{id:298051,name:"SIMATIC S7 Siemens AG 2000. All rights reserved",href:"\u002Finformatika\u002Fsimatic-s7-siemens-ag-2000-all",jpg:"jpg\u002F298051"},{id:369658,name:"Ақпараттық – коммунмкациялық технологиялар",href:"\u002Finformatika\u002Faparatty--kommunmkatsiyaly-tehnologiyalar",jpg:"jpg\u002F369658"},{id:138041,name:"Основы С#. Платформа Microsoft.NET. Основные понятия. Пространство имен. (Лекция 1)",href:"\u002Finformatika\u002Fosnovy-s-platforma-microsoftnet-osnovnye-ponyatiya",jpg:"jpg\u002F138041"},{id:167928,name:"Алгоритм. Свойства алгоритма. Исполнители",href:"\u002Finformatika\u002Falgoritm-svoystva-algoritma-ispolniteli",jpg:"jpg\u002F167928"},{id:611334,name:"Информационная безопасность",href:"\u002Finformatika\u002Finformatsionnaya-bezopasnost-36",jpg:"jpg\u002F611334"},{id:202597,name:"Технічне завдання. ДСТУ 19.201-78 Технічне завдання. Вимоги до змісту та оформленню",href:"\u002Finformatika\u002Ftehnchne-zavdannya-dstu-19201-78-tehnchne",jpg:"jpg\u002F202597"},{id:413340,name:"Роль информатизации и цифровизации системы здравоохранения в эффективности управления и оказания медицинской помощи",href:"\u002Finformatika\u002Frol-informatizatsii-i-tsifrovizatsii-sistemy-zdravoohraneniya",jpg:"jpg\u002F413340"},{id:292324,name:"Жанр компьютерных игр - шутер",href:"\u002Finformatika\u002Fzhanr-kompyuternyh-igr-shuter-1",jpg:"jpg\u002F292324"},{id:6621,name:"Методы анализа текста в R",href:"\u002Finformatika\u002Fmetody-analiza-teksta-v-r",jpg:"jpg\u002F6621"},{id:20843,name:"Test automation",href:"\u002Finformatika\u002Ftest-automation",jpg:"jpg\u002F20843"},{id:203198,name:"Верстка web-страниц. Стили",href:"\u002Finformatika\u002Fverstka-web-stranits-stili",jpg:"jpg\u002F203198"},{id:323089,name:"Объектно-ориентированный анализ и проектирование",href:"\u002Finformatika\u002Fobektno-orientirovannyy-analiz-i-proektirovanie-2",jpg:"jpg\u002F323089"},{id:379198,name:"Экспертные рекомендации по оптимизации сайтов компании ENER INVEST",href:"\u002Finformatika\u002Fekspertnye-rekomendatsii-po-optimizatsii-saytov-kompanii",jpg:"jpg\u002F379198"},{id:383625,name:"Конечные автоматы. (Лекция 5)",href:"\u002Finformatika\u002Fkonechnye-avtomaty-lektsiya-5",jpg:"jpg\u002F383625"},{id:400997,name:"Цели, задачи и основы JavaScript",href:"\u002Finformatika\u002Ftseli-zadachi-i-osnovy-javascript",jpg:"jpg\u002F400997"},{id:553343,name:"Урок информатики Компьютерная помощница- мышь",href:"\u002Finformatika\u002Furok-informatiki-kompyuternaya-pomoshchnitsa-mysh",jpg:"jpg\u002F553343"},{id:24292,name:"Образовательный комплекс Компьютерные сети. Модель ISOOSI",href:"\u002Finformatika\u002Fobrazovatelnyy-kompleks-kompyuternye-seti-model-isoosi",jpg:"jpg\u002F24292"},{id:378758,name:"Основы архитектуры операционных систем",href:"\u002Finformatika\u002Fosnovy-arhitektury-operatsionnyh-sistem",jpg:"jpg\u002F378758"},{id:303306,name:"Разработка игры QUICK",href:"\u002Finformatika\u002Frazrabotka-igry-quick",jpg:"jpg\u002F303306"},{id:529272,name:"Презентация по теме Файловая технология организации данных в современных ПК",href:"\u002Finformatika\u002Fprezentatsiya-po-teme-faylovaya-tehnologiya-organizatsii",jpg:"jpg\u002F529272"},{id:387300,name:"Обучение по функционалу 3-9%",href:"\u002Finformatika\u002Fobuchenie-po-funktsionalu-3-9",jpg:"jpg\u002F387300"},{id:381123,name:"Software Developers Conference New York City",href:"\u002Finformatika\u002Fsoftware-developers-conference-new-york-city",jpg:"jpg\u002F381123"},{id:317870,name:"Аренда 1С. Облачный сервис Аренда 1С",href:"\u002Finformatika\u002Farenda-1s-oblachnyy-servis-arenda-1s",jpg:"jpg\u002F317870"},{id:321511,name:"Требования к структуре и формату презентации проектов, представляемых на интерактивных сессиях",href:"\u002Finformatika\u002Ftrebovaniya-k-strukture-i-formatu-prezentatsii-3",jpg:"jpg\u002F321511"},{id:417518,name:"Сжатие файлов. Архиваторы",href:"\u002Finformatika\u002Fszhatie-faylov-arhivatory",jpg:"jpg\u002F417518"},{id:334946,name:"Boutique Hotel Social Media",href:"\u002Finformatika\u002Fboutique-hotel-social-media",jpg:"jpg\u002F334946"},{id:437457,name:"Программирование на языке Python. Символьные строки",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-python-simvolnye-stroki-1",jpg:"jpg\u002F437457"},{id:547640,name:"Информационные модели на графах. Разработка урока с презентациями.",href:"\u002Finformatika\u002Finformatsionnye-modeli-na-grafah-razrabotka-uroka",jpg:"jpg\u002F547640"}],navigation:{next:"\u002Fekonomika\u002Finnovatsionnaya-ekonomika-i-tehnologicheskoe-predprinimatelstvo-shablon",next_name:"Инновационная экономика и технологическое предпринимательство (шаблон)",prev:"\u002Ffizika\u002Fscr-sistema-kataliticheskogo-vosstanovleniya-vyhlopnyh-gazov",prev_name:"SCR - Система каталитического восстановления выхлопных газов на двигателях Weichai Euro 4 & 5"}}},categories:{result:[{id:J,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:J,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:I,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:H,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:S,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","События","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",18,8,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Передвиньте мяч по полю
Пусть мяч перемещается при клике на поле, туда, куда был клик
Требования:
Центр мяча должен совпадать с местом нажатия мыши (если это возможно без пересечения краёв поля);
CSS-анимация желательна, но не обязательна;
Мяч ни в коем случае не должен пересекать границы поля;
При прокрутке страницы ничего не должно ломаться;
Заметки:
Код должен уметь работать с различными размерами мяча и поля, не привязываться к каким-либо фиксированным значениям.
Используйте свойства event.clientX/event.clientY для определения координат мыши при клике.
https://plnkr.co/edit/gRBZystyjxJU5Tc5?p=preview&preview