Об’єкт event. Обробка подій презентация

Обробники подій у JavaScript можуть бути задані такими способами:
1) в атрибуті тегу (у HTML):
<тег onподія="код на JavaScript" />
Наприклад:
onclick="myfunc();"
type="button" />

Наприклад:
value="Виконати розрахунок!" id="but" />
Файл script.js:
function countNumbers() {
var resElem = document.getElementById("result");
var res = 0;
for(var i = 1; i <= 3; i++)
res += i * 2;
resElem.innerHTML = res.toString();
}

2) через властивість DOM-елемента (у JS):
- якщо функція оголошена як FD або FE:
elem.onподія = назваФункції;
якщо функція оголошена як анонімна:
elem.onподія = function ()
{
// код функції
}

Наприклад:
Файл script.js:
var elem;
window.onload = function() {
elem = document.getElementById('but');
elem.onclick = countNumbers;
}
function countNumbers() {
var resElem = document.getElementById("result");
var res = 0;
for(var i = 1; i <= 3; i++)
res += i * 2;
resElem.innerHTML = res.toString();
}

3) через перехоплювачі подій:
- додавання обробника події:
elem.addEventListener("подія", назваФункції);
- видалення обробника події:
elem.removeEventListener("подія",
назваФункції);
Переваги:
можна призначати кілька обробників події;
можна оброблювати нестандартні події

Наприклад:
Файл script.js:
var elem;
window.addEventListener("load", function loadDoc() {
elem = document.getElementById('but');
window.removeEventListener("load", loadDoc);
elem.addEventListenter("click", countNumbers);
}
function countNumbers() {
var resElem = document.getElementById("result");
var res = 0;
...
resElem.innerHTML = res.toString();
}

У кожну функцію-обробник передається першим параметром об’єкт event, який містить інформацію про подію:
elem.addEventListener('click', myClick);
function myClick(event) { console.log(event.type + " на " + event.currentTarget);
console.log(event.clientX + ":" + event.clientY);
}

function myClick(event) {
var info = event.поле;
}
Поля об’єкта event:

Спливання подій. При спрацюванні події, вона спочатку спрацьовує для вкладеного тегу, потім для його батька, потім для батька батька і так далі поки не дійде до тегу html.
FORM
DIV
P
Подія click спрацює для трьох тегів: p → div → form

Об’єкт event містить поля:

Наприклад:
FORM
DIV
P
var form = document.querySelector('form');
form.onclick = function(event)
{
event.target.style.backgroundColor = 'yellow';
alert("target = " + event.target.tagName +
", this=" + this.tagName);
event.target.style.backgroundColor = '';
};

Наприклад:
Якщо клікнути на тезі p, то
відбудуться такі кроки:
1. подія click спрацює для
тегу p:
event.target вказує на p event.currentTatget вказує на p
2. подія click спрацює для тегу div:
event.target вказує на p event.currentTatget вказує на div
3. подія click спрацює для тегу form:
event.target вказує на p event.currentTatget вказує на form
4. подія click спрацює для тегу body:
event.target вказує на p
event.currentTatget вказує на body
5. подія click спрацює для тегу html:
event.target вказує на p
event.currentTatget вказує на html

https://jsfiddle.net/2s7u98do/
window.addEventListener('load', function loadFunc()
{
window.removeEventListener('load', loadFunc);
var elem = document.getElementById('game');
game.addEventListener('click', function (event)
{
var targ = event.target;
if (targ.tagName == 'TD')
{
var curColor = targ.style['backgroundColor'];
var color = (curColor == 'green')?'white':'green';
targ.style.backgroundColor = color;
}
});
});
Приклад

Для відміни спливання події:
event.stopPropagation();
Для відміни стандартної дії при настанні події:
event.preventDefault();
Події можна генерувати (примусово виконати обробник події):
var event = new Event("click");
elem.dispatchEvent(event);

HTML:
PHP
HTML
JavaScript
Flash
JavaScript:
var menu = document.getElementById('menu');
menu.addEventListener('click', function(event)
{
if (event.target.nodeName != 'A') return;
var href = event.target.getAttribute('href');
alert( href ); event.preventDefault();
});
Приклад відміни стандартної дії при натисканні на
посилання

Події миші
Прості:
mousedown / mouseup
mouseover / mouseout / mouseenter / mouseleave
mousemove
Комплексні:
click
contextmenu
dblclick
mousedown → mouseup → click
mousedown → mouseup → contextmenu
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
Комплексним подіям передує чітко визначений ряд простих подій
При натисканні правою клавішею миші спочатку спрацьовує подія contextmenu, а потім з’являється контекстне меню. Для заборони відображення контекстного меню потрібно використовувати event.preventDefault():
Натисніть праву кнопку
миші на цьому тезі
window.addEventListener('load', function loadFunc() {
window.removeEventListener('load', loadFunc);
document.getelementById('block').addEventListener(
'contextmenu', function (event) {
// код event.preventDefault();
});
});

Події миші
Для подій миші об’єкт event містить такі поля:

Події mouseover / mouseout,
mouseenter / mouseleave

Для події mouseover об’єкт event містить поля:
event.target – елемент, на який перейшла миша;
event.relatedTarget – елемент, з якого перейшла миша.
Для події mouseout об’єкт event містить поля:
event.target – елемент, з якого перейшла миша;
event.relatedTarget – елемент, на який перейшла миша.
Якщо миша перейшла з-за меж вікна (перейшла за вікно), то event.relatedTarget == null

Приклад.
Є HTML-розмітка:
Комірка 11
Один
Два
Три
Комірка 12
Один
Два
Три
Комірка 13
Один
Два
Три
CSS-стилі:
#table td {
width: 150px;
white-space: nowrap;
text-align: center;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 12px;
}
#table .a11 {
background: #999;
}
#table .a12 {
background: #03f;
color: #fff;
}
JavaScript:
window.onload = function() {
table.onmouseover = function(event) {
var target = event.target;
target.style.background = 'pink';
};
table.onmouseout = function(event) {
var target = event.target;
target.style.background = '';
};
}
Пояснення: події, які виникають у вкладених у table тегах, спливають і перехоплюються
у тезі table обробниками подій onmouseover і onmouseout. Це дає можливість не
встановлювати обробники подій для кожної комірки, а встановити один раз –
для таблиці.
https://jsfiddle.net/morozovandriy/zxngrh8d/1/
Слайд 22
Приклад.
Проблема:
при переході курсору миші на тег, розміщений всередині комірки
при введенні
курсору миші у комірку
https://jsfiddle.net/morozovandriy/zxngrh8d/1/
Слайд 23
Приклад.
Проблему можна вирішити, відслідковуючи, в який саме тег відбувається перехід. Якщо
перехід здійснюється в тег, який знаходиться у поточній комірці, то не треба нічого робити.
window.onload = function() {
table.onmouseover = function(event) {
var target = event.target;
while (target != this) {
if (target.tagName == 'TD') break;
target = target.parentNode;
}
if (target == this) return;
target.style.background = 'pink';
};
table.onmouseout = function(event) {
var target = event.target;
while (target != this) {
if (target.tagName == 'TD') break;
target = target.parentNode;
}
if (target == this) return;
target.style.background = '';
};
}
https://jsfiddle.net/morozovandriy/ob6cakzw/1/
Слайд 24
Події клавіатури
keydown – при натисканні клавіші
keyup – при відпусканні клавіші
keypress –
при відпусканні клавіші для зчитування введеного символу
Послідовність спрацьовування подій:
keydown → keypress → keyup
Особливості:
події keydown / keyup дозволяють відслідкувати яка клавіша або яка комбінація клавіш була натиснута;
подія keypress дозволяє отримати введений символ;
в полях форми при виникненні подій keydown / keypress клавіша ще оброблена браузером (тобто при зверненні до value відповідного поля значення буде ще старе).
Слайд 25
Події клавіатури
Об’єкт event для подій клавіатури містить поля:
event.keyCode – код кнопки
на клавіатурі (не символа, а саме кнопки)
event.charCode, event.which – код введеного символа;
event.char – введений символ
Для подій клавіатури також можна перевіряти, чи була затиснута службова клавіша:
event.shiftKey
event.altKey
event.ctrlKey
event.metaKey
Слайд 26
Події клавіатури
event.keyCode для кнопки клавіатури можна отримати з сайту:
http://keycode.info/ та з
сайту
https://www.w3.org/2002/09/tests/keys-cancel2.html
Наприклад, можна заборонити оновлення сторінки при
натисканні клавіші F5.
window.addEventListener('keydown',
function myKeyDown(event)
{
if (event.keyCode == 116)
event.preventDefault();
});
Для цього на сайті http://keycodes.info/ отримуємо код клавіші
F5.
Слайд 27
Події клавіатури
Приклад. Блок, що переміщується за допомогою клавіш
стрілок.
HTML-код:
Натискайте клавіші стрілок
для переміщення блоку
CSS:
#block { position: absolute; left:10px; top:10px; width:20px; height:20px; background-color:red; }
p { font: 16px Arial; color: gray; text-align:center; }
Зовнішній вигляд:
Имя файла: Об’єкт-event.-Обробка-подій.pptx
Количество просмотров: 65
Количество скачиваний: 0
Скачать
- Предыдущая
Ішкі істер органдары
Следующая -
Әкімшілік құқық бойынша тәртіптік-құқықтық мәжбүрлеу
Похожие презентации
Представление графических данных. Форматы графических данных
Создание современного новостного сайта, с постоянным наполнением контентом
Классификация СУБД. Тема 7.1
Развитие музеев. Конец 20, начало 21 века
Базы данных, как основа современных CALS-технологий
Введение в программирование
Программирование мобильных приложений. Сенсоры. Кубик
Понятие информационной безопасности. Основные составляющие. Важность проблемы
Business designing &amp; deploying network solutions for small and medium business. (Lecture 3)
SQL. База данных
Презентация Весна.
Устройство компьютера
АИС РТРС. Эксплуатация. Система мобильного мониторинга
Стандарт кодирования видео и звуковой информации. MPEG-4
Кодирование и обработка числовой информации. Методическая разработка
Операционные системы
Работа с личным кабинетом (ЛК)
Турботаргет. Таргетированная реклама
Комп’ютерні віруси і антивіруси
Сетевые протоколы и коммуникации
Задачи
Медиаконвергенция: осмысление феномена под разным углом
Перечисления. Объявление и использование перечислений
Выявление и устранение типовых неисправностей приводов, HDD, SSD, Flash
Решение логических задач
Чит-код социальных сетей
История Tik Tok
Решение задач в ALOHA
Обратная связь
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){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}},categories:{result:[{id:G,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:G,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:8,name:H,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:18,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"}]},item:{result:{id:293423,name:m,category:H,count:28,jpg:"jpg\u002F293423",hits:65,download:b,h1:"Об’єкт event. Обробка подій презентация",meta:{h1:m,title:m,description:"Об’єкт event. Обробка подій презентация на тему, доклад, Информатика",keywords:"Об’єкт event. Обробка подій, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Об’єкт event. Обробка подій из раздела Информатика. Презентация на заданную тему содержит 28 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EОбробники подій у JavaScript можуть бути задані такими способами:\u003Cbr\u003E\u003Cp\u003E1) в атрибуті тегу (у HTML):\u003Cbr\u003E\u003Cтег onподія=\"код на JavaScript\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cinput value=\"Натисніть\" \u003Cbr\u003E onclick=\"myfunc();\" \u003Cbr\u003E type=\"button\" \u002F\u003E \u003Cbr\u003E \u003Cp\u003E",file:"Об’єкт-event.-Обробка-подій.pptx",texts:["\u003Cp\u003EОб’єкт event. Обробка подій\u003Cbr\u003E\u003Cp\u003EМорозов Андрій Васильович, \u003Cbr\u003Eк.т.н, доц., \u003Cbr\u003Eдекан факультету інформаційно-комп’ютерних технологій ЖДТУ\u003Cbr\u003E","\u003Cp\u003EОбробники подій у JavaScript можуть бути задані такими способами:\u003Cbr\u003E\u003Cp\u003E1) в атрибуті тегу (у HTML):\u003Cbr\u003E\u003Cтег onподія=\"код на JavaScript\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cinput value=\"Натисніть\" \u003Cbr\u003E onclick=\"myfunc();\" \u003Cbr\u003E type=\"button\" \u002F\u003E \u003Cbr\u003E","\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML\u003E\r\n\u003Chtml\u003E\r\n\u003Chead\u003E \u003Cscript src=\"script.js\"\u003E\u003C\u002Fscript\u003E \u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n \u003Cinput type=\"button\" onclick=\"countNumbers()\" \u003Cbr\u003E value=\"Виконати розрахунок!\" id=\"but\" \u002F\u003E\u003Cbr\u003E \u003Cdiv id=\"result\"\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EФайл script.js:\u003Cbr\u003E function countNumbers() {\u003Cbr\u003E var resElem = document.getElementById(\"result\");\u003Cbr\u003E var res = 0;\r\n for(var i = 1; i \u003C= 3; i++) \u003Cbr\u003E res += i * 2;\u003Cbr\u003E resElem.innerHTML = res.toString();\u003Cbr\u003E }\u003Cbr\u003E","\u003Cp\u003E2) через властивість DOM-елемента (у JS):\u003Cbr\u003E- якщо функція оголошена як FD або FE:\u003Cbr\u003E elem.onподія = назваФункції;\u003Cbr\u003Eякщо функція оголошена як анонімна:\u003Cbr\u003E elem.onподія = function ()\u003Cbr\u003E {\u003Cbr\u003E \u002F\u002F код функції \u003Cbr\u003E }\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\r\n\u003Chead\u003E \u003Cscript src=\"script.js\"\u003E\u003C\u002Fscript\u003E \u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n \u003Cinput type=\"button\" value=\"Виконати\" id=\"but\" \u002F\u003E\u003Cbr\u003E \u003Cdiv id=\"result\"\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EФайл script.js:\u003Cbr\u003E\u003Cp\u003Evar elem;\r\nwindow.onload = function() {\u003Cbr\u003E elem = document.getElementById('but');\r\n elem.onclick = countNumbers;\r\n}\r\nfunction countNumbers() {\r\n var resElem = document.getElementById(\"result\");\r\n var res = 0;\r\n for(var i = 1; i \u003C= 3; i++)\r\n res += i * 2;\r\n resElem.innerHTML = res.toString();\r\n}\u003Cbr\u003E","\u003Cp\u003E3) через перехоплювачі подій:\u003Cbr\u003E - додавання обробника події:\u003Cbr\u003Eelem.addEventListener(\"подія\", назваФункції);\u003Cbr\u003E - видалення обробника події:\u003Cbr\u003Eelem.removeEventListener(\"подія\", \u003Cbr\u003E назваФункції);\u003Cbr\u003E\u003Cp\u003EПереваги:\u003Cbr\u003Eможна призначати кілька обробників події;\u003Cbr\u003Eможна оброблювати нестандартні події\u003Cbr\u003E","\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\r\n\u003Chead\u003E \u003Cscript src=\"script.js\"\u003E\u003C\u002Fscript\u003E \u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n \u003Cinput type=\"button\" value=\"Виконати\" id=\"but\" \u002F\u003E\u003Cbr\u003E \u003Cdiv id=\"result\"\u003E\u003C\u002Fdiv\u003E\r\n\u003C\u002Fbody\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EФайл script.js:\u003Cbr\u003E\u003Cp\u003Evar elem;\r\nwindow.addEventListener(\"load\", function loadDoc() {\u003Cbr\u003E elem = document.getElementById('but');\r\n window.removeEventListener(\"load\", loadDoc);\u003Cbr\u003E elem.addEventListenter(\"click\", countNumbers);\r\n}\r\nfunction countNumbers() {\r\n var resElem = document.getElementById(\"result\");\r\n var res = 0;\u003Cbr\u003E ...\r\n resElem.innerHTML = res.toString();\r\n}\u003Cbr\u003E","\u003Cp\u003EУ кожну функцію-обробник передається першим параметром об’єкт event, який містить інформацію про подію:\u003Cbr\u003E\u003Cp\u003Eelem.addEventListener('click', myClick);\u003Cbr\u003Efunction myClick(event) { \r\n console.log(event.type + \" на \" + event.currentTarget);\r\n console.log(event.clientX + \":\" + event.clientY);\r\n}\u003Cbr\u003E","\u003Cp\u003Efunction myClick(event) {\u003Cbr\u003E var info = event.поле;\u003Cbr\u003E}\u003Cbr\u003EПоля об’єкта event:\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСпливання подій. При спрацюванні події, вона спочатку спрацьовує для вкладеного тегу, потім для його батька, потім для батька батька і так далі поки не дійде до тегу html.\u003Cbr\u003E\u003Cp\u003E\u003Cform onclick=\"alert('form')\"\u003EFORM\r\n \u003Cdiv onclick=\"alert('div')\"\u003EDIV\r\n \u003Cp onclick=\"alert('p')\"\u003EP\u003C\u002Fp\u003E\r\n \u003C\u002Fdiv\u003E\r\n\u003C\u002Fform\u003E\u003Cbr\u003E\u003Cp\u003EПодія click спрацює для трьох тегів: p → div → form\u003Cbr\u003E","\u003Cp\u003EОб’єкт event містить поля:\u003Cbr\u003E","\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cp\u003E\u003Cform id=\"form\"\u003EFORM \u003Cbr\u003E \u003Cdiv\u003EDIV \u003Cbr\u003E \u003Cp\u003EP\u003C\u002Fp\u003E \u003Cbr\u003E \u003C\u002Fdiv\u003E \u003Cbr\u003E\u003C\u002Fform\u003E \u003Cbr\u003E\u003Cp\u003Evar form = document.querySelector('form'); \u003Cbr\u003Eform.onclick = function(event) \u003Cbr\u003E{ \u003Cbr\u003E event.target.style.backgroundColor = 'yellow'; \u003Cbr\u003E alert(\"target = \" + event.target.tagName + \u003Cbr\u003E \", this=\" + this.tagName); \u003Cbr\u003E event.target.style.backgroundColor = ''; \u003Cbr\u003E}; \u003Cbr\u003E","\u003Cp\u003EНаприклад:\u003Cbr\u003E\u003Cp\u003EЯкщо клікнути на тезі p, то \u003Cbr\u003Eвідбудуться такі кроки:\u003Cbr\u003E\u003Cp\u003E1. подія click спрацює для \u003Cbr\u003E тегу p:\u003Cbr\u003Eevent.target вказує на p event.currentTatget вказує на p\u003Cbr\u003E\u003Cp\u003E2. подія click спрацює для тегу div:\u003Cbr\u003Eevent.target вказує на p event.currentTatget вказує на div\u003Cbr\u003E\u003Cp\u003E3. подія click спрацює для тегу form:\u003Cbr\u003Eevent.target вказує на p event.currentTatget вказує на form\u003Cbr\u003E\u003Cp\u003E4. подія click спрацює для тегу body:\u003Cbr\u003E event.target вказує на p \u003Cbr\u003E event.currentTatget вказує на body\u003Cbr\u003E5. подія click спрацює для тегу html:\u003Cbr\u003E event.target вказує на p \u003Cbr\u003E event.currentTatget вказує на html\u003Cbr\u003E","\u003Cp\u003Ehttps:\u002F\u002Fjsfiddle.net\u002F2s7u98do\u002F\u003Cbr\u003E\u003Cp\u003Ewindow.addEventListener('load', function loadFunc()\r\n{\r\n window.removeEventListener('load', loadFunc);\r\n var elem = document.getElementById('game');\r\n game.addEventListener('click', function (event)\r\n {\r\n var targ = event.target;\r\n if (targ.tagName == 'TD')\r\n {\r\n var curColor = targ.style['backgroundColor'];\r\n var color = (curColor == 'green')?'white':'green';\r\n targ.style.backgroundColor = color;\r\n }\r\n });\r\n});\u003Cbr\u003E\u003Cp\u003E\u003Ctable id=\"game\"\u003E\r\n \u003Ctr\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003C\u002Ftr\u003E\r\n \u003Ctr\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003C\u002Ftr\u003E\r\n \u003Cbr\u003E \u003Ctr\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003Ctd\u003E\u003C\u002Ftd\u003E\r\n \u003C\u002Ftr\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cp\u003EПриклад\u003Cbr\u003E","\u003Cp\u003EДля відміни спливання події:\u003Cbr\u003Eevent.stopPropagation();\u003Cbr\u003EДля відміни стандартної дії при настанні події:\u003Cbr\u003Eevent.preventDefault();\u003Cbr\u003E\u003Cp\u003EПодії можна генерувати (примусово виконати обробник події):\u003Cbr\u003Evar event = new Event(\"click\");\u003Cbr\u003Eelem.dispatchEvent(event);\u003Cbr\u003E","\u003Cp\u003EHTML:\u003Cbr\u003E\u003Cul id=\"menu\" class=\"menu\"\u003E\r\n \u003Cli\u003E\u003Ca href=\"\u002Fphp\"\u003EPHP\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \u003Cli\u003E\u003Ca href=\"\u002Fhtml\"\u003EHTML\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \u003Cli\u003E\u003Ca href=\"\u002Fjavascript\"\u003EJavaScript\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n \u003Cli\u003E\u003Ca href=\"\u002Fflash\"\u003EFlash\u003C\u002Fa\u003E\u003C\u002Fli\u003E\r\n\u003C\u002Ful\u003E\u003Cbr\u003E\u003Cp\u003EJavaScript:\u003Cbr\u003Evar menu = document.getElementById('menu');\r\nmenu.addEventListener('click', function(event) \u003Cbr\u003E {\r\n if (event.target.nodeName != 'A') return;\r\n var href = event.target.getAttribute('href');\r\n alert( href ); \t\r\n event.preventDefault();\r\n });\u003Cbr\u003E\u003Cp\u003EПриклад відміни стандартної дії при натисканні на \u003Cbr\u003Eпосилання\u003Cbr\u003E","\u003Cp\u003EПодії миші\u003Cbr\u003EПрості:\u003Cbr\u003Emousedown \u002F mouseup\u003Cbr\u003Emouseover \u002F mouseout \u002F mouseenter \u002F mouseleave\u003Cbr\u003Emousemove\u003Cbr\u003EКомплексні:\u003Cbr\u003Eclick\u003Cbr\u003Econtextmenu\u003Cbr\u003Edblclick\u003Cbr\u003E\u003Cp\u003Emousedown → mouseup → click \u003Cbr\u003E\u003Cp\u003Emousedown → mouseup → contextmenu \u003Cbr\u003E\u003Cp\u003Emousedown → mouseup → click → mousedown → mouseup → click → dblclick \u003Cbr\u003E\u003Cp\u003EКомплексним подіям передує чітко визначений ряд простих подій\u003Cbr\u003E\u003Cp\u003EПри натисканні правою клавішею миші спочатку спрацьовує подія contextmenu, а потім з’являється контекстне меню. Для заборони відображення контекстного меню потрібно використовувати event.preventDefault():\u003Cbr\u003E\u003Cp\u003E\u003Cdiv id=\"block\"\u003E\r\n Натисніть праву кнопку\u003Cbr\u003E миші на цьому тезі\r\n\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003Ewindow.addEventListener('load', function loadFunc() {\r\n window.removeEventListener('load', loadFunc);\r\n document.getelementById('block').addEventListener(\u003Cbr\u003E 'contextmenu', function (event) {\r\n \u002F\u002F код \r\n event.preventDefault();\r\n });\r\n});\u003Cbr\u003E","\u003Cp\u003EПодії миші\u003Cbr\u003E\u003Cp\u003EДля подій миші об’єкт event містить такі поля:\u003Cbr\u003E","\u003Cp\u003EПодії mouseover \u002F mouseout, \u003Cbr\u003Emouseenter \u002F mouseleave\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EДля події mouseover об’єкт event містить поля:\u003Cbr\u003Eevent.target – елемент, на який перейшла миша;\u003Cbr\u003Eevent.relatedTarget – елемент, з якого перейшла миша.\u003Cbr\u003E\u003Cp\u003EДля події mouseout об’єкт event містить поля:\u003Cbr\u003Eevent.target – елемент, з якого перейшла миша;\u003Cbr\u003Eevent.relatedTarget – елемент, на який перейшла миша.\u003Cbr\u003E\u003Cp\u003EЯкщо миша перейшла з-за меж вікна (перейшла за вікно), то event.relatedTarget == null\u003Cbr\u003E","\u003Cp\u003EПриклад.\u003Cbr\u003E\u003Cp\u003EЄ HTML-розмітка:\u003Cbr\u003E\u003Ctable id=\"table\"\u003E\r\n \u003Ctr\u003E\r\n \u003Ctd class=\"a11\"\u003E\u003Cstrong\u003EКомірка 11\u003C\u002Fstrong\u003E\r\n \u003Cbr\u002F\u003EОдин\r\n \u003Cbr\u002F\u003EДва\r\n \u003Cbr\u002F\u003EТри\r\n \u003C\u002Ftd\u003E\r\n \u003Ctd class=\"a12\"\u003E\u003Cstrong\u003EКомірка 12\u003C\u002Fstrong\u003E\r\n \u003Cbr\u002F\u003EОдин\r\n \u003Cbr\u002F\u003EДва\r\n \u003Cbr\u002F\u003EТри\r\n \u003C\u002Ftd\u003E\r\n \u003Ctd class=\"a13\"\u003E\u003Cstrong\u003EКомірка 13\u003C\u002Fstrong\u003E\r\n \u003Cbr\u002F\u003EОдин\r\n \u003Cbr\u002F\u003EДва\r\n \u003Cbr\u002F\u003EТри\u003Cbr\u003E\u003Cp\u003ECSS-стилі:\u003Cbr\u003E#table td {\r\n width: 150px;\r\n white-space: nowrap;\r\n text-align: center;\r\n vertical-align: bottom;\r\n padding-top: 5px;\r\n padding-bottom: 12px;\r\n}\r\n\r\n#table .a11 {\r\n background: #999;\r\n}\r\n\r\n#table .a12 {\r\n background: #03f;\r\n color: #fff;\r\n}\u003Cbr\u003E\u003Cp\u003EJavaScript:\u003Cbr\u003Ewindow.onload = function() {\r\n table.onmouseover = function(event) {\r\n var target = event.target;\u003Cbr\u003E target.style.background = 'pink';\r\n };\r\n\r\n table.onmouseout = function(event) {\r\n var target = event.target;\r\n target.style.background = '';\r\n };\r\n}\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПояснення: події, які виникають у вкладених у table тегах, спливають і перехоплюються\u003Cbr\u003Eу тезі table обробниками подій onmouseover і onmouseout. Це дає можливість не \u003Cbr\u003Eвстановлювати обробники подій для кожної комірки, а встановити один раз – \u003Cbr\u003Eдля таблиці.\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fjsfiddle.net\u002Fmorozovandriy\u002Fzxngrh8d\u002F1\u002F\u003Cbr\u003E","\u003Cp\u003EПриклад.\u003Cbr\u003E\u003Cp\u003EПроблема: \u003Cbr\u003Eпри переході курсору миші на тег, розміщений всередині комірки\u003Cbr\u003E\u003Cp\u003Eпри введенні курсору миші у комірку\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fjsfiddle.net\u002Fmorozovandriy\u002Fzxngrh8d\u002F1\u002F\u003Cbr\u003E","\u003Cp\u003EПриклад.\u003Cbr\u003E\u003Cp\u003EПроблему можна вирішити, відслідковуючи, в який саме тег відбувається перехід. Якщо перехід здійснюється в тег, який знаходиться у поточній комірці, то не треба нічого робити.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ewindow.onload = function() {\r\n table.onmouseover = function(event) {\r\n var target = event.target;\r\n while (target != this) {\r\n if (target.tagName == 'TD') break;\r\n target = target.parentNode;\r\n }\r\n if (target == this) return;\r\n target.style.background = 'pink';\r\n };\r\n table.onmouseout = function(event) {\r\n var target = event.target;\r\n while (target != this) {\r\n if (target.tagName == 'TD') break;\r\n target = target.parentNode;\r\n }\r\n if (target == this) return;\r\n target.style.background = '';\r\n };\r\n}\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fjsfiddle.net\u002Fmorozovandriy\u002Fob6cakzw\u002F1\u002F\u003Cbr\u003E","\u003Cp\u003EПодії клавіатури\u003Cbr\u003Ekeydown – при натисканні клавіші\u003Cbr\u003Ekeyup – при відпусканні клавіші\u003Cbr\u003Ekeypress – при відпусканні клавіші для зчитування введеного символу\u003Cbr\u003E\u003Cp\u003EПослідовність спрацьовування подій:\u003Cbr\u003Ekeydown → keypress → keyup\u003Cbr\u003E\u003Cp\u003EОсобливості:\u003Cbr\u003Eподії keydown \u002F keyup дозволяють відслідкувати яка клавіша або яка комбінація клавіш була натиснута;\u003Cbr\u003Eподія keypress дозволяє отримати введений символ;\u003Cbr\u003Eв полях форми при виникненні подій keydown \u002F keypress клавіша ще оброблена браузером (тобто при зверненні до value відповідного поля значення буде ще старе).\u003Cbr\u003E","\u003Cp\u003EПодії клавіатури\u003Cbr\u003E\u003Cp\u003EОб’єкт event для подій клавіатури містить поля:\u003Cbr\u003Eevent.keyCode – код кнопки на клавіатурі (не символа, а саме кнопки) \u003Cbr\u003Eevent.charCode, event.which – код введеного символа;\u003Cbr\u003Eevent.char – введений символ\u003Cbr\u003E\u003Cp\u003EДля подій клавіатури також можна перевіряти, чи була затиснута службова клавіша:\u003Cbr\u003Eevent.shiftKey\u003Cbr\u003Eevent.altKey\u003Cbr\u003Eevent.ctrlKey\u003Cbr\u003Eevent.metaKey\u003Cbr\u003E","\u003Cp\u003EПодії клавіатури\u003Cbr\u003E\u003Cp\u003Eevent.keyCode для кнопки клавіатури можна отримати з сайту:\u003Cbr\u003Ehttp:\u002F\u002Fkeycode.info\u002F та з сайту \u003Cbr\u003Ehttps:\u002F\u002Fwww.w3.org\u002F2002\u002F09\u002Ftests\u002Fkeys-cancel2.html \u003Cbr\u003E\u003Cp\u003EНаприклад, можна заборонити оновлення сторінки при \u003Cbr\u003Eнатисканні клавіші F5.\u003Cbr\u003E\u003Cp\u003Ewindow.addEventListener('keydown', \u003Cbr\u003Efunction myKeyDown(event)\r\n{\r\n if (event.keyCode == 116)\r\n \t\tevent.preventDefault();\r\n});\u003Cbr\u003E\u003Cp\u003EДля цього на сайті http:\u002F\u002Fkeycodes.info\u002F отримуємо код клавіші\u003Cbr\u003EF5.\u003Cbr\u003E","\u003Cp\u003EПодії клавіатури\u003Cbr\u003E\u003Cp\u003EПриклад. Блок, що переміщується за допомогою клавіш \u003Cbr\u003Eстрілок.\u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Cp\u003EНатискайте клавіші стрілок для переміщення блоку\u003C\u002Fp\u003E\r\n\u003Cdiv id=\"block\"\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E\u003Cp\u003ECSS:\u003Cbr\u003E#block { position: absolute; left:10px; top:10px; width:20px; height:20px; background-color:red; }\u003Cbr\u003E\r\np { font: 16px Arial; color: gray; text-align:center; }\u003Cbr\u003E\u003Cp\u003EЗовнішній вигляд:\u003Cbr\u003E","\u003Cp\u003EПодії клавіатури\u003Cbr\u003E\u003Cp\u003Evar keyCodes = {UP : 38, DOWN : 40, LEFT : 37, RIGHT : 39};\r\nvar step = 10;\r\nfunction moveBlock(dx, dy)\r\n{\r\n var style = getComputedStyle(block);\r\n var left = parseInt(style.left);\r\n var top = parseInt(style.top);\r\n block.style.left = left + dx + \"px\";\r\n block.style.top = top + dy + \"px\";\r\n}\r\nwindow.onkeydown = function(event)\r\n{\r\n switch(event.keyCode)\r\n {\r\n case keyCodes.UP: moveBlock(0, -step); break;\r\n case keyCodes.DOWN: moveBlock(0, step); break;\r\n case keyCodes.LEFT: moveBlock(-step, 0); break;\r\n case keyCodes.RIGHT: moveBlock(step, 0); break;\r\n }\r\n}\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fjsfiddle.net\u002Fmorozovandriy\u002Fgdbg8yaL\u002F\u003Cbr\u003E"],href:"\u002Finformatika\u002Fobkt-event-obrobka-pody",href_category:"\u002Finformatika",date:1637417660,related:[{id:272323,name:"Представление графических данных. Форматы графических данных",href:"\u002Finformatika\u002Fpredstavlenie-graficheskih-dannyh-formaty-graficheskih-dannyh",jpg:"jpg\u002F272323"},{id:587826,name:"Создание современного новостного сайта, с постоянным наполнением контентом",href:"\u002Finformatika\u002Fsozdanie-sovremennogo-novostnogo-sayta-s-postoyannym",jpg:"jpg\u002F587826"},{id:92990,name:"Классификация СУБД. Тема 7.1",href:"\u002Finformatika\u002Fklassifikatsiya-subd-tema-71",jpg:"jpg\u002F92990"},{id:353452,name:"Развитие музеев. Конец 20, начало 21 века",href:"\u002Finformatika\u002Frazvitie-muzeev-konets-20-nachalo-21",jpg:"jpg\u002F353452"},{id:222143,name:"Базы данных, как основа современных CALS-технологий",href:"\u002Finformatika\u002Fbazy-dannyh-kak-osnova-sovremennyh-cals",jpg:"jpg\u002F222143"},{id:544067,name:"Введение в программирование",href:"\u002Finformatika\u002Fvvedenie-v-programmirovanie-10",jpg:"jpg\u002F544067"},{id:292154,name:"Программирование мобильных приложений. Сенсоры. Кубик",href:"\u002Finformatika\u002Fprogrammirovanie-mobilnyh-prilozheniy-sensory-kubik",jpg:"jpg\u002F292154"},{id:442817,name:"Понятие информационной безопасности. Основные составляющие. Важность проблемы",href:"\u002Finformatika\u002Fponyatie-informatsionnoy-bezopasnosti-osnovnye-sostavlyayushchie-vazhnost",jpg:"jpg\u002F442817"},{id:5277,name:"Business designing &amp; deploying network solutions for small and medium business. (Lecture 3)",href:"\u002Finformatika\u002Fbusiness-designing-amp-deploying-network-solutions",jpg:"jpg\u002F5277"},{id:582546,name:"SQL. База данных",href:"\u002Finformatika\u002Fsql-baza-dannyh-1",jpg:"jpg\u002F582546"},{id:535283,name:"Презентация Весна.",href:"\u002Finformatika\u002Fprezentatsiya-vesna-8",jpg:"jpg\u002F535283"},{id:332368,name:"Устройство компьютера",href:"\u002Finformatika\u002Fustroystvo-kompyutera-34",jpg:"jpg\u002F332368"},{id:246744,name:"АИС РТРС. Эксплуатация. Система мобильного мониторинга",href:"\u002Finformatika\u002Fais-rtrs-ekspluatatsiya-sistema-mobilnogo-monitoringa",jpg:"jpg\u002F246744"},{id:389260,name:"Стандарт кодирования видео и звуковой информации. MPEG-4",href:"\u002Finformatika\u002Fstandart-kodirovaniya-video-i-zvukovoy-informatsii",jpg:"jpg\u002F389260"},{id:283191,name:"Кодирование и обработка числовой информации. Методическая разработка",href:"\u002Finformatika\u002Fkodirovanie-i-obrabotka-chislovoy-informatsii-metodicheskaya",jpg:"jpg\u002F283191"},{id:356815,name:"Операционные системы",href:"\u002Finformatika\u002Foperatsionnye-sistemy-28",jpg:"jpg\u002F356815"},{id:223507,name:"Работа с личным кабинетом (ЛК)",href:"\u002Finformatika\u002Frabota-s-lichnym-kabinetom-lk",jpg:"jpg\u002F223507"},{id:22549,name:"Турботаргет. Таргетированная реклама",href:"\u002Finformatika\u002Fturbotarget-targetirovannaya-reklama",jpg:"jpg\u002F22549"},{id:101254,name:"Комп’ютерні віруси і антивіруси",href:"\u002Finformatika\u002Fkompyutern-vrusi--antivrusi",jpg:"jpg\u002F101254"},{id:248013,name:"Сетевые протоколы и коммуникации",href:"\u002Finformatika\u002Fsetevye-protokoly-i-kommunikatsii",jpg:"jpg\u002F248013"},{id:165113,name:"Задачи",href:"\u002Finformatika\u002Fzadachi-2019",jpg:"jpg\u002F165113"},{id:178479,name:"Медиаконвергенция: осмысление феномена под разным углом",href:"\u002Finformatika\u002Fmediakonvergentsiya-osmyslenie-fenomena-pod-raznym-uglom",jpg:"jpg\u002F178479"},{id:190357,name:"Перечисления. Объявление и использование перечислений",href:"\u002Finformatika\u002Fperechisleniya-obyavlenie-i-ispolzovanie-perechisleniy",jpg:"jpg\u002F190357"},{id:364929,name:"Выявление и устранение типовых неисправностей приводов, HDD, SSD, Flash",href:"\u002Finformatika\u002Fvyyavlenie-i-ustranenie-tipovyh-neispravnostey-privodov",jpg:"jpg\u002F364929"},{id:166288,name:"Решение логических задач",href:"\u002Finformatika\u002Freshenie-logicheskih-zadach-11",jpg:"jpg\u002F166288"},{id:423279,name:"Чит-код социальных сетей",href:"\u002Finformatika\u002Fchit-kod-sotsialnyh-setey",jpg:"jpg\u002F423279"},{id:294285,name:"История Tik Tok",href:"\u002Finformatika\u002Fistoriya-tik-tok",jpg:"jpg\u002F294285"},{id:243708,name:"Решение задач в ALOHA",href:"\u002Finformatika\u002Freshenie-zadach-v-aloha",jpg:"jpg\u002F243708"}],navigation:{next:"\u002Fyurisprudentsiya\u002Fkmshlk-y-boyynsha-trtptk-yty-mzhbrleu",next_name:"Әкімшілік құқық бойынша тәртіптік-құқықтық мәжбүрлеу",prev:"\u002Fyurisprudentsiya\u002Fshk-ster-organdary",prev_name:"Ішкі істер органдары"}}}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"mypreza.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:Q,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","Об’єкт event. Обробка подій","Учебные презентации","Презентации в 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",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Приклад.
Проблема:
при переході курсору миші на тег, розміщений всередині комірки
при введенні курсору миші у комірку
https://jsfiddle.net/morozovandriy/zxngrh8d/1/

Приклад.
Проблему можна вирішити, відслідковуючи, в який саме тег відбувається перехід. Якщо перехід здійснюється в тег, який знаходиться у поточній комірці, то не треба нічого робити.
window.onload = function() {
table.onmouseover = function(event) {
var target = event.target;
while (target != this) {
if (target.tagName == 'TD') break;
target = target.parentNode;
}
if (target == this) return;
target.style.background = 'pink';
};
table.onmouseout = function(event) {
var target = event.target;
while (target != this) {
if (target.tagName == 'TD') break;
target = target.parentNode;
}
if (target == this) return;
target.style.background = '';
};
}
https://jsfiddle.net/morozovandriy/ob6cakzw/1/

Події клавіатури
keydown – при натисканні клавіші
keyup – при відпусканні клавіші
keypress – при відпусканні клавіші для зчитування введеного символу
Послідовність спрацьовування подій:
keydown → keypress → keyup
Особливості:
події keydown / keyup дозволяють відслідкувати яка клавіша або яка комбінація клавіш була натиснута;
подія keypress дозволяє отримати введений символ;
в полях форми при виникненні подій keydown / keypress клавіша ще оброблена браузером (тобто при зверненні до value відповідного поля значення буде ще старе).

Події клавіатури
Об’єкт event для подій клавіатури містить поля:
event.keyCode – код кнопки на клавіатурі (не символа, а саме кнопки)
event.charCode, event.which – код введеного символа;
event.char – введений символ
Для подій клавіатури також можна перевіряти, чи була затиснута службова клавіша:
event.shiftKey
event.altKey
event.ctrlKey
event.metaKey

Події клавіатури
event.keyCode для кнопки клавіатури можна отримати з сайту:
http://keycode.info/ та з сайту
https://www.w3.org/2002/09/tests/keys-cancel2.html
Наприклад, можна заборонити оновлення сторінки при
натисканні клавіші F5.
window.addEventListener('keydown',
function myKeyDown(event)
{
if (event.keyCode == 116)
event.preventDefault();
});
Для цього на сайті http://keycodes.info/ отримуємо код клавіші
F5.

Події клавіатури
Приклад. Блок, що переміщується за допомогою клавіш
стрілок.
HTML-код:
Натискайте клавіші стрілок для переміщення блоку
CSS:
#block { position: absolute; left:10px; top:10px; width:20px; height:20px; background-color:red; }
p { font: 16px Arial; color: gray; text-align:center; }
Зовнішній вигляд: