Об ’ єкт event. Об робка подій

інформаційно-комп’ютерних технологій ЖДТУ

атрибуті тегу (у HTML):

Наприклад:

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();
}

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(); }

видалення обробника події:
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(); }

інформацію про подію:

elem.addEventListener('click', myClick);
function myClick(event) { console.log(event.type +

" на " + event.currentTarget); console.log(event.clientX + ":" + event.clientY); }

тегу, потім для його батька, потім для батька батька і

так далі поки не дійде до тегу html.

FORM

DIV

P

Подія click спрацює для трьох тегів: p → div → form

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 = '';
};

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

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; } }); });

Приклад

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

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(); });

Приклад відміни стандартної дії при натисканні на
посилання

→ 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.relatedTarget – елемент, з якого перейшла миша.
Для події

mouseout об’єкт event містить поля:
event.target – елемент, з якого перейшла миша;
event.relatedTarget – елемент, на який перейшла миша.

Якщо миша перейшла з-за меж вікна (перейшла за вікно), то event.relatedTarget == null

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/

введенні курсору миші у комірку
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 

→ keypress → keyup

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

кнопки на клавіатурі (не символа, а саме кнопки)
event.charCode, event.which

– код введеного символа;
event.char – введений символ

Для подій клавіатури також можна перевіряти, чи була затиснута службова клавіша:
event.shiftKey
event.altKey
event.ctrlKey
event.metaKey

з сайту
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.

стрілок для переміщення блоку
CSS:
#block { position: absolute; left:10px; top:10px;

width:20px; height:20px; background-color:red; }
p { font: 16px Arial; color: gray; text-align:center; }

Зовнішній вигляд:

LEFT : 37, RIGHT : 39}; var step = 10; function moveBlock(dx,

dy) { var style = getComputedStyle(block); var left = parseInt(style.left); var top = parseInt(style.top); block.style.left = left + dx + "px"; block.style.top = top + dy + "px"; } window.onkeydown = function(event) { switch(event.keyCode) { case keyCodes.UP: moveBlock(0, -step); break; case keyCodes.DOWN: moveBlock(0, step); break; case keyCodes.LEFT: moveBlock(-step, 0); break; case keyCodes.RIGHT: moveBlock(step, 0); break; } }

https://jsfiddle.net/morozovandriy/gdbg8yaL/