Инструменты пользователя
object_event
Различия
Показаны различия между двумя версиями страницы.
|
object_event [2019/03/27 14:31] |
object_event [2020/06/13 13:46] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | ====== JavaScript События ====== | ||
| + | * [[http:// | ||
| + | События возникают на странице в результате действий, | ||
| + | Пользователь - первопричина возникновения события. Однако, | ||
| + | < | ||
| + | В JavaScript используется весьма уникальная система событий. Она работает абсолютно асинхронно, | ||
| + | Основное отличие программ, | ||
| + | как в асинхронных программах вы просто регистрируете в качестве обработчика события функцию обратного вызова, | ||
| + | |||
| + | Под обработкой события подразумевается программирование реакции браузера (документа) в ответ на возникновение некоторого события. Обработчиком события называется функция или фрагмент кода [[JavaScript]], | ||
| + | |||
| + | * **Привязка обработчиков событий** | ||
| + | |||
| + | Для того, чтобы элемент страницы реагировал на то или иное событие, | ||
| + | может осуществляться несколькими способами: | ||
| + | * Первый способ назначения обработчика события состоит в использовании HTML атрибутов элемента: | ||
| + | < | ||
| + | </ | ||
| + | * Второй способ состоит в использовании свойств элемента из сценария JavaScript. Предположим, | ||
| + | element1.имя_события = обработчик; | ||
| + | </ | ||
| + | * **addEventListener()**. DOM- привязка: | ||
| + | // Обнаружение первого элемента < | ||
| + | // ' | ||
| + | document.getElementsByTagName(" | ||
| + | // Остановка всех попыток отправки данных формы | ||
| + | return stopDefault( e ); | ||
| + | }, false); | ||
| + | </ | ||
| + | <note important> | ||
| + | * **addEvent()** обертка над функциями attachEvent и addEventListener. [[http:// | ||
| + | |||
| + | <note warning> | ||
| + | |||
| + | ====== Object Event ====== | ||
| + | Объект Event позволяет получать подробную информацию о событии, | ||
| + | * объект event создается браузером автоматически | ||
| + | * объект event доступен только в обработчиках событий | ||
| + | * объект event не имеет методов. В вашем распоряжении только свойства, | ||
| + | <note important> | ||
| + | |||
| + | < | ||
| + | Свойство Пояснение | ||
| + | type Возвращает тип события | ||
| + | returnValue позволяет установить возвращаемое обработчиком события значение. | ||
| + | true - (по умолчанию) стандартный обработчик будет вызван | ||
| + | false - стандартный обработчик не вызывается | ||
| + | |||
| + | cancelBubble устанавливает признак " | ||
| + | true - всплывание события не происходит | ||
| + | false - (по умолчанию) событие всплывает | ||
| + | |||
| + | srcElement элемент - источник события | ||
| + | toElement указывает элемент, | ||
| + | fromElement указывает элемент, | ||
| + | button определяет, | ||
| + | 0 - нет нажатых кнопок | ||
| + | 1 - левая кнопка | ||
| + | 2 - правая кнопка | ||
| + | 3 - левая и правая кнопки | ||
| + | 4 - средняя кнопка | ||
| + | 5 - левая и средняя кнопки | ||
| + | 6 - правая и средняя кнопки | ||
| + | 7 - все три кнопки | ||
| + | |||
| + | wheelDelta определяет смещение при прокрутке колеса мыши. Отрицательное значение - поворот колеса "на себя", | ||
| + | offsetX, offsetY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла элемента, | ||
| + | x, y Координаты курсора мыши в момент возникновения события относительно верхнего левого угла относительно позиционируемого родительского элемента. | ||
| + | clientX, clientY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла клиентской области страницы. | ||
| + | screenX, screenY Координаты курсора мыши в момент возникновения события относительно верхнего левого угла экрана. | ||
| + | keyCode Код нажатой на клавиатуре клавиши в Unicode | ||
| + | altKey Признак состояния кнопки Alt в момент возникновения события: | ||
| + | altLeft Признак состояния левой кнопки Alt в момент возникновения события: | ||
| + | ctrlKey Признак состояния кнопки Ctrl в момент возникновения события: | ||
| + | ctrlLeft Признак состояния левой кнопки Ctrl в момент возникновения события: | ||
| + | shiftKey Признак состояния кнопки Shift в момент возникновения события: | ||
| + | shiftLeft Признак состояния левой кнопки Shift в момент возникновения события: | ||
| + | repeat признак удерживания клавиши | ||
| + | </ | ||
| + | |||
| + | ===== Запрет вызова стандартного обработчика ===== | ||
| + | Существует ряд элементов в HTML, для которых определены некоторые обработчики событий по умолчанию или стандартные обработчики. Так для элемента <a> (гиперссылка) определен обработчик onclick выполняющий переход на ресурс, | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <style type=" | ||
| + | a.btn { | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | |||
| + | </ | ||
| + | <script type=" | ||
| + | function clickHandler () { | ||
| + | alert (" | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <a class=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | Существует ряд задач, когда в решении о вызове стандартного обработчика должет принять участие пользователь (прямо или коссвенно). В таких случаях поступают следующим образом: | ||
| + | |||
| + | Листинг: | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <style type=" | ||
| + | a.btn { | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | } | ||
| + | | ||
| + | | ||
| + | | ||
| + | |||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <a class=" | ||
| + | | ||
| + | http:// | ||
| + | </a> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | Разберем пример по порядку. На странице расположена гиперссылка на web-узел компании Microsoft®. При щелчке не гиперссылке будет вызван обработчик события click, состоящий из оператора return, возвращающего значение " | ||
| + | |||
| + | ===== Пример. Раскрывающаяся " | ||
| + | На web страницах часто используют этот прием. Например, | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <style type=" | ||
| + | #primer1 { | ||
| + | display: none; | ||
| + | padding: 5; | ||
| + | background-color: | ||
| + | } | ||
| + | </ | ||
| + | <script type=" | ||
| + | function display(elem) { | ||
| + | if (elem.style.display != " | ||
| + | elem.style.display = " | ||
| + | event.srcElement.innerText = " | ||
| + | } | ||
| + | else { | ||
| + | elem.style.display = " | ||
| + | event.srcElement.innerText = " | ||
| + | } | ||
| + | return false; | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | <a href="#" | ||
| + | <pre id=" | ||
| + | #include < | ||
| + | |||
| + | void main () { | ||
| + | cout<<" | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ===== Пример. Работаем с мышью: перетаскивание элементов. Drag and Drop. ===== | ||
| + | Предлагаемый для рассмотрения пример демонстрирует минимально функциональную версию реализации технологии перетаскивания объектов мышью. Это учебный пример, | ||
| + | |||
| + | Приступим. Для начала зададимся вопросом - какие события мы будем обрабатывать для перетаскиваемого элемента? | ||
| + | |||
| + | Итак, с событиями вопрос выяснен. Теперь разберемся с самими элементами. Дело в том, что задавать координаты элементов (left и top) можно только для абсолютно позиционируемых (в нашем случае) элементов. Значит - в стилевое оформление перетаскиваемых элементов должна входить строка " | ||
| + | |||
| + | Ниже приводится полный код примера. Обратите внимание на следующую особенность: | ||
| + | После выполнения примера, | ||
| + | |||
| + | Исправим этот недостаток. Для этого будем при " | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <style type=" | ||
| + | # | ||
| + | | ||
| + | | ||
| + | | ||
| + | left: 10; | ||
| + | top: 10; | ||
| + | | ||
| + | | ||
| + | } | ||
| + | </ | ||
| + | <script type=" | ||
| + | var elementToDrag = null; | ||
| + | var offX, offY; // глобальные переменные для хранения смещения | ||
| + | function captureElement (elem) { // " | ||
| + | if (!elementToDrag) { | ||
| + | elementToDrag = elem; | ||
| + | offX = event.offsetX; | ||
| + | offY = event.offsetY; | ||
| + | } | ||
| + | } | ||
| + | function releaseElement () { // " | ||
| + | elementToDrag = null; | ||
| + | } | ||
| + | function dragElement () { // " | ||
| + | if (elementToDrag){ | ||
| + | elementToDrag.style.pixelLeft = event.clientX - offX; // вносим поправку | ||
| + | elementToDrag.style.pixelTop = event.clientY - offY; // в координаты элемента | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | </ | ||
| + | <body onmousemove=" | ||
| + | <span id=" | ||
| + | onmousedown=" | ||
| + | onmouseup=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||