Wiki-підручник з веб-технологіями

Будь ласка, зверніть увагу на те, що ви повинні писати Event.MOUSEMOVE. де MOUSEMOVE має бути написано верхнім регістром. При визначенні функції, яка викликається, коли відбувається подія MouseMove. dи повинні використовувати малі літери: window.onmousemove =.

Тепер ми можемо об'єднувати два останні приклади. Ми хочемо відобразити координати курсору миші, що пересувається з натиснутою кнопкою. Наступний приклад показує це:

Код для цього прикладу виглядає так:

Спочатку ми вказуємо Window-об'єкту фіксувати події MouseDown і MouseUp:

Ви бачите, що ми використовуємо знак | (Або) щоб визначити кілька подій, які повинні бути зафіксовані Window-об'єктом. Наступні два рядки визначають те, що трапиться, коли відбудуться ці події:

Наступний рядок коду визначає, що станеться, коли Window-об'єкт отримає подія MouseMove:

Але почекайте, ми не визначили Event.MOUSEMOVE в window.captureEvents (). Це означає, що ця подія не зафіксовано Window-об'єктом. Тоді чому ми повідомляємо Window-об'єкту значення moveIt хоча цей подія ніколи не досягне Window-об'єкта? Відповідь на це питання може бути знайдений в функції startDrag () яка викликається, як тільки відбувається подія MouseDown:

Це означає, що Window-об'єкт зафіксує подію MouseMove, як тільки буде натиснута кнопка миші. Ми повинні зупинити фіксацію події MouseMove. коли відбувається подія MouseUp. Це робить функція endDrag () за допомогою методу releaseEvents:

Функція moveIt () виводить координати миші в рядок стану.

Тепер у нас є всі елементи для реєстрації подій, необхідних для виконання технології drag drop. Тепер ми можемо перейти до показу об'єктів на екрані.