об’єкт події

Щоб добре обробити подія, недостатньо знати про те, що це - «клік» або «натискання клавіші». Можуть знадобитися деталі: координати курсору, введений символ і інші, в залежності від події.

Деталі події браузер записує в «об'єкт події», який передається першим аргументом в обробник.

Приклад нижче демонструє використання об'єкта події:

Властивості об'єкта event:

event.type Тип події, в даному випадку click event.currentTarget Елемент, на якому спрацював обробник. Значення - в точності таке ж, як і у this. але бувають ситуації, коли обробник є методом об'єкта і його this за допомогою bind прив'язаний до цього об'єкта, тоді ми можемо використовувати event.currentTarget. event.clientX / event.clientY Координати курсора в момент кліка (щодо вікна)

Є також і ряд інших властивостей, в залежності від подій, які ми розберемо в подальших главах, коли будемо детально знайомитися з подіями миші, клавіатури і так далі.

Об'єкт події доступний і в HTML

При призначенні обробника в HTML, теж можна використовувати змінну event. це буде працювати кросбраузерну:

Це можливо тому, що коли браузер з атрибута створює функцію-обробник, то вона виглядає так: function (event) . Тобто, її перший аргумент називається "event".

IE8- замість передачі параметра оброблювачу створює глобальний об'єкт window.event. Оброблювач може звернутися до нього.

Працює це так:

М'яч після перельоту повинен ставати центром рівно під курсор миші, якщо це можливо без вильоту за край поля.
CSS-анімація не обов'язкова, але бажана.
М'яч повинен зупинятися біля кордонів поля, ні в якому разі не вилітати за них.
При прокручуванні сторінки з полем нічого не повинно ламатися.

Код не повинен залежати від конкретних розмірів м'яча і поля.
Вам знадобляться властивості event.clientX / event.clientY

М'яч під курсор миші

Основна складність першого етапу - зрушити м'яч під курсор, тому що координати кліка e.clientX / Y - щодо вікна, а м'яч позиціонується абсолютно всередині поля, його координати left / top потрібно ставити щодо лівого-верхнього внутрішнього (всередині рамки!) кута поля.

Щоб правильно вирахувати координати м'яча, потрібно отримати координати кута поля і відняти їх з clientX / Y:

Далі м'яч потрібно зрушити на половину його ширини і висоти ball.clientWidth / clientHeight. щоб він виявився центром під курсором.

Код, який повністю центрує м'яч, ви знайдете в повному рішенні: