Во время работы со страницей пользователь совершает различные действия: нажимает кнопки мыши, вводит текст на клавиатуре. Каждое такое действие - это событие браузера. Его можно отследить и выполнить определённые строки программы при их возникновении. Для этого в JavaScript есть обработчики событий. Кроме действий пользователя, существуют и другие события браузера, например полная загрузка страницы.
Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, Обработка события
Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.
Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :
1 |
Страница |
JavaScript:
JavaScript:
17 |
var inform = function () { alert("Другая кнопка"); }; var mbutton = document.getElementById("mbutton"); mbutton.onclick = inform; |
Когда функция присваивается обработчику, то после имени функции нет скобок. Если поставить скобки, то это будет не присваивание функции, а вызов на исполнение.
Существует метод addEventListener() , который также назначает обработчик события элементу. Он считается более современным. Сейчас он применяется не часто, но в JavaScript есть новые события, обработать которые можно только с помощью этого метода.
элемент.addEventListener (событие, функция)
Параметры:
событие - событие, которое нужно обрабатывать
функция - функция, которая становится обработчиком
В параметрах данного метода название события пишется в кавычках и слово on перед ним писать не нужно.
HTML код:
| Новая кнопка |
JavaScript:
24 |
var newinform = function () { alert("Нажата новая кнопка"); }; var newbutton = document.getElementById("newbutton"); newbutton.addEventListener("click", newinform); |
Метод removeEventListener() позволяет удалить обработчик.
элемент.removeEventListener (событие, функция)
С помощью рассмотренного метода, элементу можно назначить несколько обработчиков одного события. Тогда нужно удалять отдельно каждый из них.
Объект событияПри каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.
Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:
13 |
button.onclick = function (event) { alert(event.type); }; |
Нажмите на кнопку, будет выведен тип сработавшего события.
У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.
Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:
Заголовок документа
Откройте эту страницу в браузере, она выглядит так:
Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):
При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:
На самом верхнем уровне находится объект window , представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.
Все объекты имеют методы (отделяются от объекта точкой), например:
document.write
позволяет писать текст в текущую страницу,
window.open
открывает новое окно браузера.
Также объекты имеют свойства, например:
document.bgcolor
содержит значение фонового цвета текущей страницы,
document.title
содержит заголовок страницы.
Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.
Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. Т.е. в ответ на пользовательское событие.
Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:
Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).
Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.
| Blur | потеря объектом фокуса | onBlur |
| Change | пользователь изменяет значение элемента | onChange |
| Click | пользователь щелкает мыщью по объекту | onClick |
| DblClick | пользователь делает двойной щелчок мышью по объекту | onDblClick |
| DragDrop | пользователь перетаскивает мышью объект | onDragDrop |
| Error | возникновение javascript-ошибки | onError |
| Focus | окно или элемент формы получает фокус | onFocus |
| KeyDown | пользователь нажимает клавишу клавиатуры | onKeyDown |
| KeyPress | пользователь удерживает нажатой клавишу клавиатуры | onKeyPress |
| KeyUp | пользователь отпускает клавишу клавиатуры | onKeyUp |
| Load | документ загружается в браузер | onLoad |
| MouseDown | пользователь нажимает кнопку мыши | onMouseDown |
| MouseOut | указатель мыши выходит за пределы элемента | onMouseOut |
| MouseOver | указатель мыши помещается над элементом | onMouseOver |
| MouseUp | пользователь отпускает кнопку мыши | onMouseUp |
| Move | пользователь перемещает окно | onMove |
| Reset | пользователь нажимает кнопку "reset" формы | onReset |
| Resize | пользователь изменяет размеры окна или элемента | onResize |
| Select | пользователь выбирает элемент формы | onSelect |
| Submit | пользователь нажимает кнопку "submit" формы | onSubmit |
| Unload | пользователь закрывает документ | onUnload |
Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций. Их мы и будем изучать в следующем уроке.
Некоторые программы с применением JavaScript event работают напрямую с вводимыми пользователем данными. Момент возникновения и порядок таких взаимодействий не могут быть предсказаны заранее.
Обработчики событийРеагировать на нажатие клавиши можно, постоянно считывая ее состояние, чтобы поймать момент нажатия клавиши, прежде чем она снова не будет отпущена.
Именно так обрабатывался ввод данных на примитивных машинах. Более прогрессивным является определение нажатия клавиши и его постановка в очередь. Затем программа может периодически проверять очередь новых событий и реагировать на то, что там находит. В таком случае программа должна не забывать просматривать очередь и делать это часто.
В период от нажатия клавиши и до обнаружения программой этого события, она фактически не отвечает на запросы. Такой подход называется поллингом (опросом ).
Большинство программистов стараются избегать его, если это возможно.
Самым лучшим способом считается реализация системы, которая дает коду возможность реагировать на события, когда они происходят. Браузеры реализуют ее, предоставляя возможность регистрировать функции обработчиков для конкретных JavaScript event :
Кликните по этому документу, чтобы активировать обработчик.
addEventListener("click", function() { console.log("You clicked!"); });Функция addEventListener регистрируется таким образом, что ее второй аргумент вызывается всякий раз, когда происходит событие, описанное первым аргументом.
События и узлы DOMКаждый обработчик событий браузера регистрируется в контексте. При вызове функции addEventListener она вызывается как метод для всего окна, так как в браузере глобальный диапазон эквивалентен объекту window . Каждый элемент DOM имеет свой собственный метод addEventListener , который позволяет отслеживать события именно в этом элементе:
Нажмите на меня
Здесь нет обработчика.
var button = document.querySelector("button"); button.addEventListener("click", function() { console.log("Button clicked."); });В данном примере обработчик подключен к узлу кнопки. JavaScript mouse events приводит в действие обработчик, а клик в остальной части документа — нет.
Установив для узла атрибут onclick , мы получим тот же результат. Но узел имеет только один атрибут onclick , поэтому можно зарегистрировать для каждого узла только один обработчик. Метод addEventListener позволяет добавлять любое количество обработчиков. Так мы застрахованы от случайной замены обработчика, который уже был зарегистрирован.
Метод removeEventListener , вызывается с аргументами, аналогичными addEventListener . Он удаляет обработчик:
Одноразовая кнопка var button = document.querySelector("button"); function once() { console.log("Done."); button.removeEventListener("click", once); } button.addEventListener("click", once);
Чтобы отменить функцию обработчика, мы задаем для нее имя (например, once ). Так мы передаем ее как в addEventListener , так и в removeEventListener .
Объекты событийХотя мы не упоминали об этом в приведенных выше примерах, в функции обработчиков JavaScript event передается аргумент: объект события. Он предоставляет дополнительную информацию о событии. Например, если мы хотим знать, какая клавиша мыши была нажата, нужно получить значение свойства объекта события which :
Кликните по мне любой клавишей мыши var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) { if (event.which == 1) console.log("Left button"); else if (event.which == 2) console.log("Middle button"); else if (event.which == 3) console.log("Right button"); });
Информация, хранящаяся в объекте, различается зависимости от типа события. Свойство объекта type всегда содержит строку, идентифицирующую событие (например, «click » или «mousedown «).
РаспространениеОбработчики событий (например, JavaScript touch events ), зарегистрированные для родительских узлов, также будут принимать события, которые происходят в дочерних элементах. Если была нажата кнопка, находящаяся внутри абзаца, обработчики событий абзаца также получат событие click .
Событие распространяется от узла, в котором оно произошло, в родительский узел и в корень документа. После того, как все обработчики, зарегистрированные в конкретном узле, вступили в действие по очереди, возможность реагировать на событие получают обработчики, зарегистрированные для всего окна.
В любой момент обработчик события может вызвать для объекта события метод stopPropagation , чтобы предотвратить распространение события дальше. Это может быть полезно, когда у вас есть кнопка внутри другого интерактивного элемента, и вы не хотите, чтобы при нажатии кнопки активировалось поведение, заданное для клика мышью по внешним элементам.
В следующем примере мы регистрируем обработчики «MouseDown » как для кнопки, так и для абзаца. При клике правой клавишей (JavaScript mouse events ) обработчик вызывает метод stopPropagation , который предотвращает запуск обработчика абзаца. При нажатии на кнопку другой клавишей мыши запускаются оба обработчика:
Абзац и в нем кнопка.
var para = document.querySelector("p"); var button = document.querySelector("button"); para.addEventListener("mousedown", function() { console.log("Handler for paragraph."); }); button.addEventListener("mousedown", function(event) { console.log("Handler for button."); if (event.which == 3) event.stopPropagation(); });Большинство объектов событий имеют свойство target , которое указывает на узел, в котором они возникли. Вы можете использовать это свойство, чтобы случайно не обрабатывать какое-то событие, которое распространяется вверх из узла.
Также можно использовать JavaScript event target , чтобы расширить диапазон события определенного типа. Например, если у вас есть узел, содержащий длинный список кнопок, более удобно зарегистрировать один обработчик клика для внешнего узла и использовать свойство target , чтобы отслеживать, была ли нажата кнопка, а не регистрировать экземпляры обработчика для всех кнопок:
A B C document.body.addEventListener("click", function(event) { if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); });
Действия по умолчаниюСо многими событиями связаны действия по умолчанию. Если вы нажмете на ссылку, то перейдете к целевому элементу ссылки. Если нажмете стрелку вниз, браузер прокрутит страницу вниз. Если вы кликните правой клавишей мыши, откроется контекстное меню.
Для большинства типов событий обработчики JavaScript event вызываются до выполнения действий по умолчанию. Если не нужно, чтобы выполнялось поведение по умолчанию, нужно вызвать для объекта события метод preventDefault .
Его использовать для реализации пользовательских сочетаний клавиш или контекстных меню. Или, чтобы переопределить поведение, которое ожидают пользователи. Ниже приводится ссылка, по которой нельзя перейти:
MDN var link = document.querySelector("a"); link.addEventListener("click", function(event) { console.log("Nope."); event.preventDefault(); });
Старайтесь не делать так, если у вас нет на это веских причин.
В зависимости от браузера некоторые события не могут быть перехвачены. В Google Chrome , например, сочетание клавиш (event keycode JavaScript ) для закрытия текущей вкладки (Ctrl-W или Command-W ) не может быть обработано с помощью JavaScript .
События клавишКогда пользователь нажимает клавишу на клавиатуре, браузер запускает событие «keydown «. Когда он отпускает клавишу, срабатывает событие «keyup «:
Эта страница становится фиолетовой, когда вы нажимаете клавишу V.
addEventListener("keydown", function(event) { if (event.keyCode == 86) document.body.style.background = "violet"; }); addEventListener("keyup", function(event) { if (event.keyCode == 86) document.body.style.background = ""; });Также это событие срабатывает, когда пользователь нажимает и удерживает клавишу, или пока клавиша удерживается. Например, если требуется увеличить скорость персонажа в игре, нажав на клавишу со стрелкой, и снова уменьшить ее, отпустив клавишу, то нужно быть осторожным, чтобы не увеличивать скорость каждый раз, пока клавиша нажата.
В предыдущем примере использовано свойство объекта event keycode JavaScript . С его помощью определяется, какая именно клавиша была нажата или отпущена. Ноне всегда очевидно, как привести числовой код клавиши к фактической клавише.
Для считывания значений клавиш букв и цифр используется код символа Unicode . Он связан с буквой (в верхнем регистре ) или цифрой, обозначенной на клавише. Метод charCodeAt для строк позволяет получить это значение:
console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49
С другими клавишами связаны менее предсказуемые коды клавиш. Лучший способ определить нужный код, это поэкспериментировать. Зарегистрировать обработчик события нажатия клавиши, который фиксирует коды клавиш, которые он получает, и нажать нужную клавишу.
Такие клавиши, как Shift , Ctrl , Alt порождают события, как обычные клавиши. Но при отслеживании комбинаций клавиш также можно определить, нажаты ли эти клавиши, по свойствам событий клавиатуры и JavaScript mouse events : shiftKey , ctrlKey , altKey и metaKey :
Чтобы продолжить, нажмите Ctrl-Space.
addEventListener("keydown", function(event) { if (event.keyCode == 32 && event.ctrlKey) console.log("Continuing!"); });События «keydown » и «keyup » предоставляют информацию о фактическом нажатии клавиш. Но что, если нам нужен сам вводимый текст? Получать текст из кодов клавиш неудобно. Для этого существует событие, «keypress «, которое срабатывает сразу после «keydown «. Оно повторяется вместе с «keydown «, пока клавиша нажата. Но только для клавиш, с помощью которых производится ввод символов.
Свойство charCode в объекте события содержит код, который может быть интерпретирован, как код символа Unicode . Мы можем использовать функцию String.fromCharCode , чтобы преобразовать этот код в строку из одного символа.
Установите фокус ввода на этой странице и наберите что-нибудь.
addEventListener("keypress", function(event) { console.log(String.fromCharCode(event.charCode)); });Узел DOM , в котором происходит событие зависит, от того элемента, который находился в фокусе ввода при нажатии клавиши. Обычные узлы не могут находиться в фокусе ввода (если не установить для них атрибут tabindex ), но такие элементы, как ссылки, кнопки и поля формы, могут.
Если никакой конкретный элемент не выделен фокусом ввода, то в качестве целевого узла для событий клавиши и JavaScript touch events выступает document.body .
Клики мышиНажатие клавиши мыши также приводит в действие ряд событий. События «mousedown » и «mouseup » похожи на «keydown » и «keyup «. Они запускаются, когда нажата и отпущена клавиша мыши. Данные события возникают в узлах DOM, на которые был наведен указатель мыши, когда возникло событие.
Для общего узла, к которому относилось как нажатие, так и освобождение клавиши мыши, после события «mouseup » запускается событие «click «. Например, если нажать клавишу мыши на одном пункте, а затем переместить курсор на другой пункт и отпустить кнопку, то событие «click » будет происходить в элементе, который содержит оба эти пункта.
Если два клика возникли близко друг к другу, также запускается событие «dblclick » (двойной клик ). Оно возникает после второго клика. Чтобы получить точную информацию о месте, где произошло событие мыши, нужно получить значение свойств pageX и pageY , которые содержат координаты события (в пикселях ) относительно левого верхнего угла документа.
Ниже приведена реализация примитивной программы для рисования. Каждый раз при нажатии мыши в документе (под курсором ) добавляется точка:
body { height: 200px; background: beige; } .dot { height: 8px; width: 8px; border-radius: 4px; /* закругленные углы */ background: blue; position: absolute; } addEventListener("click", function(event) { var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (event.pageY - 4) + "px"; document.body.appendChild(dot); });
Свойства clientX и clientY подобны pageX и pageY , но они относятся к видимой части документа. Они могут использоваться для сравнения координат мыши с координатами, возвращаемыми функцией getBoundingClientRect .
Движение мышиКаждый раз, когда перемещается курсов мыши, срабатывает событие «mousemove » из набора JavaScript mouse events . Оно может быть использовано для отслеживания положения мыши. Это применяется при реализации возможности перетаскивания элементов мышью.
В следующем примере программа выводит на экран панель и устанавливает обработчики событий таким образом, что при перетаскивании эта панель становится уже или шире:
Потяните за край панели, чтобы изменить ее ширину:
var lastX; // Отслеживает последнюю позицию X мыши var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) { if (event.which == 1) { lastX = event.pageX; addEventListener("mousemove", moved); event.preventDefault(); // Предотвращает выделение } }); function buttonPressed(event) { if (event.buttons == null) return event.which != 0; else return event.buttons != 0; } function moved(event) { if (!buttonPressed(event)) { removeEventListener("mousemove", moved); } else { var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = event.pageX; } }Обратите внимание, что обработчик «mousemove » зарегистрирован для всего окна. Даже если во время изменения размеров мышь выходит за пределы панели, мы все равно обновляем ширину панели и прекращаем JavaScript touch events , когда клавиша мыши была отпущена.
Мы должны прекратить изменение размера панели, когда пользователь отпускает клавишу мыши. К сожалению, не все браузеры устанавливают для событий «mousemove » свойство which . Существует стандартное свойство buttons , которое предоставляет аналогичную информацию, но оно также поддерживается не во всех браузерах. К счастью, все основные браузеры поддерживают что-то одно: либо buttons , либо which . Функция buttonPressed в приведенном выше примере сначала пытается использовать свойство buttons , и, если оно не доступно, переходит к which .
Когда курсор мыши наводится или покидает узел, запускаются события «mouseover » или «mouseout «. Они могут использоваться для создания эффектов при наведении курсора мыши, вывода какой-нибудь подписи или изменения стиля элемента.
Чтобы создать такой эффект, недостаточно просто начать его отображение при возникновении события «mouseover » и завершить после события «mouseout «. Когда мышь перемещается от узла к одному из его дочерних элементов, для родительского узла происходит событие «mouseout «. Хотя указатель мыши не покинул диапазон распространения узла.
Что еще хуже, эти JavaScript event распространяются так же, как и другие события. Когда мышь покидает один из дочерних узлов, для которого зарегистрирован обработчик, возникнет событие «mouseout «.
Чтобы обойти эту проблему, можно использовать свойство объекта события relatedTarget . В случае возникновения события «mouseover » оно указывает, на какой элемент был наведен курсор мыши до этого. А в случае возникновения «mouseout » — к какому элементу перемещается указатель. Мы будем изменять эффект наведения мыши только, когда relatedTarget находится вне нашего целевого узла.
В этом случае мы изменяем поведение, потому что курсор мыши был наведен на узел из-за его пределов (или наоборот ):
Наведите курсор мыши на этот абзац.
var para = document.querySelector("p"); function isInside(node, target) { for (; node != null; node = node.parentNode) if (node == target) return true; } para.addEventListener("mouseover", function(event) { if (!isInside(event.relatedTarget, para)) para.style.color = "red"; }); para.addEventListener("mouseout", function(event) { if (!isInside(event.relatedTarget, para)) para.style.color = ""; });Функция isInside отслеживает родительские связи заданного узла или пока не будет достигнута верхняя часть документа (когда node равен нулю ). Либо не будет найден родительский элемент, который нам нужен.
Эффект наведения гораздо проще создать с помощью псевдоселектора CSS:hover , как показано в следующем примере. Но когда эффект наведения предполагает что-то более сложное, чем просто изменение стиля целевого узла, тогда нужно использовать прием с использованием событий «mouseover » и «mouseout » (JavaScript mouse events ):
События прокруткиКаждый раз, когда элемент прокручивается, в нем срабатывает JavaScript scroll event . Его можно использовать для отслеживания того, что в данный момент просматривает пользователь; для отключения анимации, расположенной вне окна просмотра.
В следующем примере мы выводим индикатор прогресса в правом верхнем углу документа и обновляем его, чтобы он по частям заливался другим цветом по мере прокрутки страницы вниз:
.progress { border: 1px solid blue; width: 100px; position: fixed; top: 10px; right: 10px; } .progress > div { height: 12px; background: blue; width: 0%; } body { height: 2000px; }
Scroll me...
var bar = document.querySelector(".progress div"); addEventListener("scroll", function() { var max = document.body.scrollHeight - innerHeight; var percent = (pageYOffset / max) * 100; bar.style.width = percent + "%"; });Установив для элемента свойство position или fixed , мы получим тот же результат, что и при установке position:absolute . Но так мы также блокируем прокрутку элемента вместе с остальной частью документа. В результате индикатор прогресса будет статически закреплен в верхнем углу. Внутри него находится еще один элемент, размер которого изменяется в соответствии с текущим прогрессом.
В качестве единиц измерения при установке ширины мы используем % , а не рх , чтобы размеры элемента изменялись пропорционально размеру индикатора прогресса.
Глобальная переменная innerHeight содержит высоту окна, которую мы должны вычесть из общей доступной прокручиваемой высоты документа. Нельзя прокручивать окно ниже при достижении нижней части документа. С innerHeight также может использоваться innerWidth . Разделив pageYOffset (текущую позицию окна прокрутки ) на максимально допустимую позицию прокрутки и умножив на 100, мы получаем процент для индикатора прогресса.
Вызов preventDefault для JavaScript scroll event не предотвращает прокрутку. Обработчик события вызывается только после того, как происходит прокручивание.
События фокуса вводаКогда элемент находится в фокусе ввода, браузер запускает в нем событие «focus «. Когда фокус ввода снимается, запускается событие «blur «.
Эти два события не имеют распространения. Обработчик родительского элемента не уведомляется, когда дочерний элемент выделяется фокусом ввода.
В следующем примере выводится подсказка для текстового поля, которое в данный момент находится в фокусе ввода:
Имя:
Возраст:
var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); for (var i = 0; i < fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }Объект окна получает события «focus » и «blur «, когда пользователь переходит или покидает вкладку, окно браузера, в котором выводится документ.
Событие загрузкиКогда завершается загрузка страницы, для объектов тела документа и окна возникает JavaScript event «load» . Оно используется для планирования инициализации действий, для которых требуется загрузка всего документа. Не забывайте, что содержимое запускается сразу, когда встречается этот тег. Иногда это слишком рано. Например, когда скрипт должен сделать что-то с частями документа, которые загружаются после тега .
и теги скриптов, которые загружают внешние файлы, также содержат событие «load
«. Оно указывает, что файл, который был связан с ними, загружен. Как и события фокуса ввода, события загрузки не распространяются.
Когда мы закрываем страницу или переходим на другую (например, нажав на ссылку ), срабатывает событие «beforeunload «. Оно применяется, чтобы предотвратить возможность случайной потери пользователем того, с чем он работал, после закрытия документа.
Предотвращение выгрузки страницы выполняется не с помощью метода preventDefault . Вместо этого, из обработчика возвращается строка. Она используется в диалоговом окне, в котором у пользователя спрашивается, хочет ли он остаться на странице или покинуть ее. Этот механизм гарантирует, что у пользователя будет возможность покинуть страницу, даже если запущен вредоносный скрипт, целью которого является удержание посетителя на странице.
Последовательность выполнения скриптовЗапустить выполнение скрипта могут разные факторы: считывание тега, возникновение события. Метод requestAnimationFrame , задает вызов функции, перед тем как будет заново построена следующая страница. Это еще один способ, с помощью которого могут запускаться скрипты.
События JavaScript select events и все остальные могут запускаться в любой момент, но в одном документе два скрипта никогда не запустятся одновременно. Если скрипт уже выполняется, обработчикам событий и фрагментам кода, запланированным другим скриптом, придется подождать своей очереди. Именно по этой причине документ замирает, когда скрипт работает в течение длительного времени. Браузер не реагирует на клики и другие события, поскольку не может запустить обработчики событий, пока текущий скрипт не закончит работу.
Некоторые среды программирования позволяют создавать несколько потоков исполнения, которые запускаются одновременно. Обеспечив возможность выполнять одновременно несколько задач, можно повысить скорость выполнения программы. Но когда у нас есть несколько действий, которые затрагивают те же части системы одновременно, программе становится сложнее выполнять их.
Если нужно запустить процессы в фоновом режиме без замораживания страницы, браузеры предоставляют нам то, что называется web workers . Это изолированная среда JavaScript , которая работает с документом вместе с основной программой и может общаться с ним только путем отправки и получения сообщений.
Предположим, что в файле с именем code/squareworker.js у нас есть следующий код:
addEventListener("сообщение", function(event) { postMessage(event.data * event.data); });
Представьте себе, что возводимое в квадрат число является очень большим, затягивающим вычисление, и нужно выполнить вычисления в фоновом потоке. Этот код запускает web workers , посылает ему несколько сообщений и выводит ответы:
var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) { console.log("The worker responded:", event.data); }); squareWorker.postMessage(10); squareWorker.postMessage(24);
Функция postMessage отправляет сообщение, которое инициирует возникновение в приемнике события «message «. Скрипт, который создал web workers , отправляет и получает сообщения через объект Worker . С помощью этого объекта среда взаимодействуют с создавшим ее скриптом, посылая информацию и прослушивая его в своем глобальном с оригинальным скриптом.
Установка таймеровФункция setTimeout похожа на requestAnimationFrame . Она задает вызов еще одной функции, которая будет вызываться позже. Но вместо того, чтобы вызывать функцию при следующем формировании страницы, она ждет определенное количество миллисекунд. В этом примере JavaScript event фон страницы из синего становится желтым через две секунды:
document.body.style.background = "blue"; setTimeout(function() { document.body.style.background = "yellow"; }, 2000);
Иногда нужно отменить функцию, которую мы запланировали. Это делается путем сохранения значения, возвращаемого функцией setTimeout , и вызова для нее clearTimeout :
var bombTimer = setTimeout(function() { console.log("BOOM!"); }, 500); if (Math.random() < 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
Функция cancelAnimationFrame работает так же, как clearTimeout . Она вызывается значением, возвращаемым requestAnimationFrame , чтобы отменить кадр (если он еще не был вызван ).
Похожий набор функций, setInterval и clearInterval используется для установки таймера, который должен повторять действие каждые X миллисекунд:
var ticks = 0; var clock = setInterval(function() { console.log("tick", ticks++); if (ticks == 10) { clearInterval(clock); console.log("stop."); } }, 200);
ДроблениеНекоторые типы событий могут запускаться много раз в течение короткого периода времени (например, «mousemove » и javascript scroll event ). При обработке таких событий, нужно быть осторожным, чтобы это не происходило очень долго, иначе обработчик будет выполнять действие столько времени, что взаимодействие с документом станет медленным и скачкообразным.
Если нужно сделать что-то нестандартное в таком обработчике, можно использовать setTimeout , чтобы быть уверенными, что это не растянется слишком надолго. Это обычно называют дроблением события. Существует несколько отличающихся друг от друга подходов к дроблению.
В первом примере мы хотим сделать что-то, когда пользователь печатает. Но не хотим делать это после каждого события нажатия клавиши. Когда пользователь быстро печатает, нужно подождать, пока не произойдет пауза. Вместо немедленного выполнения действия в обработчике события мы устанавливаем задержку. Мы также очищаем предыдущую задержку (если таковая имеется ). Если события происходят через короткие интервалы времени (меньше, чем установленная нами задержка ), то задержка от предыдущего события отменяется:
Напечатайте что-нибудь здесь... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() { clearTimeout(timeout); timeout = setTimeout(function() { console.log("Вы перестали печатать."); }, 500); });
Передача неопределенного значения для clearTimeout или его вызов для задержки, которая уже запущена, не даст никакого результата. Нам больше не нужно быть осторожными относительно того, когда его вызывать, мы просто делаем это для каждого события.
Можно использовать иной сценарий, если нужно разделить ответы небольшим промежутком времени. Но чтобы при этом они запускались во время серии событий, а не только после нее. Например, можно отправлять в ответ на события «mousemove » (JavaScript mouse events ) текущие координаты мыши, но только через каждые 250 миллисекунд:
function displayCoords(event) { document.body.textContent = "мышь находится в точке " + event.pageX + ", " + event.pageY; } var scheduled = false, lastEvent; addEventListener("mousemove", function(event) { lastEvent = event; if (!scheduled) { scheduled = true; setTimeout(function() { scheduled = false; displayCoords(lastEvent); }, 250); } });
ЗаключениеОбработчики событий позволяют обнаруживать и реагировать на события, над которыми мы не имеем прямого контроля. Для регистрации такого обработчика используется метод addEventListener .
Каждое событие относится к определенному типу («keydown «, «focus » и так далее ), который идентифицирует его. Большинство событий вызывается для конкретного элемента DOM , а затем распространяются на родительские узлы элемента. Это позволяет обработчикам, связанным с этими элементами, обрабатывать их.
Когда вызывается обработчик, ему передается объект события с дополнительной информацией о действии. Этот объект также содержит методы, позволяющие остановить дальнейшее распространение события (stopPropagation ) или предотвратить обработку события браузером по умолчанию (preventDefault ).
Нажатие клавиш порождает события «keydown «, «keypress » и «keyup «. Нажатие мыши порождает события «mousedown «, «mouseup » и «click «. Перемещение мыши — «mousemove «, «mouseenter » и «mouseout «.
JavaScript scroll event можно определить с помощью события «scroll «, а смена фокуса — «focus » и «blur «. После завершения загрузки документа для окна возникает событие «load «.
Только одна часть JavaScript программы может работать одновременно. Обработчики событий и другие запланированные скрипты должны дожидаться, когда закончится выполнение других скриптов в очереди.
Если на твоем сайте выложена фотка любимого кота Мурзика, но ты не хочешь, чтобы кто-то ее копировал или сохранял на хард, то поставь такой скрипт в тело сайта.
В этом уроке мы создадим несколько проектов, в том числе самостоятельно выполняющуюся презентацию, которая использует события, связанные с кадрами.
В этом уроке :
- Изучение способов применения в скриптах обработчиков событий
- Определение наилучшего обработчика для вашей работы
- Использование событий мыши и кнопки для управления интерактивностью
- Добавление в проект управления с помощью клавиатуры
- Создание самопроигрывающейся презентации при помощи кадровых событий
- Использование событий фильма при создании интерактивного проекта
- Сочетание различных событий для выполнения нужной задачи
- Использование методов как обработчиков событий
- Слушатели и способы их применения
На выполнение этого урока требуется примерно два часа.
Файлы урокаФайлы-носители :
Стартовый файл :
Lesson02/Assets/MouseEvents1.fla Lesson02/Assets/FrameEvents1.fla Lesson02/Assets/ClipEvents1.fla Lesson02/Assets/OrchestratingEvents1.fla Lesson02/Assets/CarParts1.fla
Законченные проекты :
MouseEvents2.fla FrameEvents2.fla ClipEvents2.fla OrchestratingEvents2.fla CarParts2.fla
Что делают обработчики событийОбработчики событий ( event handlers ) – это оркестр, исполняющий интерактивную пьесу вашего фильма. Каждый обработчик содержит скрипт , выполняемый только тогда, когда происходит определенное событие. Каждый скрипт в фильме запускается событием – пользователь навел указатель мыши на кнопку или нажал клавишу, или фильм достиг определенного кадра на монтажном столе, и так далее.
В ActionScript обработчик события (за исключением событий, связанных с кадрами) обычно указан в первой строке всякого скрипта. Примерно так:
Когда происходит (типСобытия) { делать то-то; делать то-то; }
События, привязанные к кадрам, происходят, когда монтажный стол при воспроизведении достигает кадра, содержащего скрипт . Для скрипта, помещенного в кадр , не нужен обработчик события – такой скрипт будет выполнен при достижении данного кадра. Так, если бы приведенный выше скрипт был привязан к кадру, он выглядел бы так:
делать то-то; делать то-то;
Чем лучше вы поймете концепции обработчиков событий, тем более полным будет ваш контроль над интерактивными элементами. Правильно используя обработчики, вы сможете создать такую интерактивную среду, в которой пользователь будет чувствовать себя как дома.
Многие компьютерные программы позволяют пользователю перетаскивать элементы на экране, менять размер окон, делать те или иные настройки с помощью регуляторов, создавать собственные "шедевры искусства" при помощи виртуальных инструментов. Все эти режимы интерактивного взаимодействия зависят от того, как реализована в программном обеспечении обработка различных событий (нажатий кнопок мыши, перемещения мыши, ввода с клавиатуры и т.п.).
Выбор нужного обработчикаПравильное использование обработчиков событий – одна из наиболее сложных проблем, стоящих перед пользователем ActionScript , ведь большинство из нас не задумывается о том, как именно и почему происходят события вокруг нас. А ведь при создании интерактивной среды важно именно это – четко представлять себе, что с чем и как взаимодействует.
Знакомя вас с обработчиками событий Flash , мы будем рассматривать их связь с событиями реального мира. Не забывайте, что во Flash каждому событию соответствует действие (и ответная реакция ).
События мышиОбработчики этой группы управляют выполнением скриптов для событий, связанных с манипуляциями мышью над экранными кнопками и экземплярами фильмов-символов.
Примечание Если вы знакомы с реализацией событий мыши во Flash 5, то знаете, что там их можно было применять только к кнопкам. Во Flash MX же события мыши можно присоединять также к экземплярам фильмов-символов (об этом будет детально рассказано в упражнении).
Нажатие, контакт: on (press)
В реальном мире, если вы к чему-то прикасаетесь или на что-то нажимаете (будь то человек или кубик льда), вы ожидаете реакции: кубик льда начинает таять, человек тоже так или иначе откликается. Обработчик события on(press) служит для имитации событий вроде прикосновений, захватов, нажатий. Этот обработчик используется для запуска скрипта в ситуации, когда указатель наведен на кнопку или фильм-символ и кнопка мыши нажата.
Отпускание, освобождение: on (release)
Отпуская что-либо, прекращая контакт, вы обычно тем самым завершаете взаимодействие с предметом. Данный обработчик имитирует всякого рода освобождение – от нажатия или захвата . Применяется для запуска скрипта в ситуации, когда пользователь отпустил кнопку мыши (которую он до этого нажал на кнопке или экземпляре фильма-символа).
Сдвиг, перетаскивание: on (releaseOutside)Вообразите колоду карт, лежащую на столе. Вы нажимаете пальцем на верхнюю карту, сдвигаете ее с колоды и отпускаете палец. Во Flash вы можете представить себе кнопку, которую пользователь нажал, переместил мышь и отпустил кнопку. Этот обработчик запускает скрипт в случае, когда пользователь нажал кнопку мыши на объекте (экранной кнопке или фильме-символе), а отпустил за пределами объекта – полезно для программирования всякого рода перемещений и сдвигов.
Управление с клавиатуры: on (keyPress)Этим событием можно запрограммировать скрипт, который будет выполняться при нажатии пользователем какой-либо клавиши на клавиатуре. Клавишу можно задать любую – с буквой, цифрой, знаками препинания и
Объектная модель Java Script
Язык Java Script является объектно-ориентированным. Базовый элемент языка - объект, представляющий собой документ HTML или его элемент, окно браузера или его управляющий элемент. Объект имеет:
· свойства, описывающие его состояния. Свойствами объекта могут быть другие объекты или просто числовые значения. Если значение свойства не может быть изменено, такие свойства при описании объектов помечаются как Readonly ;
· методы - функции, позволяющие выполнять какие-либо действия над объектом;
· обработчики событий, которые позволяют выполнять определенные действия, когда происходит событие, т.е. меняется состояние объекта.
Обработчик событий выполняет программу JavaScript, когда происходит соответствующее событие.
Обработчики событий определяются атрибутом с соответствующим именем в HTML-теге, который создает данный объект JavaScript. Значением может быть любое число операторов JavaScript, разделенных точкой с запятой.
Пример определения обработчика:
Обработчики событий могут вызываться явно, например - button.onClick().
С помощью обработчиков можно, например, выдавать сообщения в ответ на действия пользователя, проверять данные, введенные в форме перед ее отправкой и т.д. Можно отменить или изменить стандартное действие, выполняемое при определенном событии. Для отмены обработчик должен вернуть значение false. Например, при нажатии на ссылку не грузится новый документ, а выдается сообщение:
Определены следующие события и обработчики:
onBlur - cобытие blur происходит, когда окно навигатора или поля формы select, text или textarea теряют фокус.
onFocus - событие focus происходит, когда окно навигатора или поле получает фокус ввода с клавиатуры или щелчком "мыши". Выбор результатов внутри поля связан с событием select, но не с событием focus.
Объекты: window, select, text, textarea.
onChange - событие change происходит, когда поля формы select, text или textarea теряют фокус и их значения были изменены.
Обработчик событий onChange может использоваться для проверки данных после их изменения пользователем.
Объекты: select, text, textarea.
onSelect - событие select происходит, когда пользователь выбирает пункт меню или списка select или некоторый текст внутри поля text или textarea.
Объекты: text, textarea, select.
onClick - событие click происходит при щелчке "мышью" на объекте формы или элементе документа.
Объекты: button, checkbox, radio, link, reset, submit.
onMouseOver - событие mouseOver происходит каждый раз, когда курсор "мыши" попадает на объект.
onMouseOut - событие mouseOotr происходит каждый раз, когда курсор "мыши" покидает границы объекта.
Объекты: link.
onSubmit - событие submit происходит, когда пользователь отправляет форму на Web-сервер.
Вы можете использовать обработчик событий onSubmit для остановки передачи данных формы; для этого используется выражение return, которое возвращает false в обработчик событий. Любое другое возвращенное значение отправляет форму.
onReset - событие reset происходит, когда пользователь сбрасывает значения всех элементов формы в установленные по умолчанию.
В NN4.0 и выше вы можете использовать обработчик событий onReset для отмены сброса данных формы; для этого используется выражение return, которое возвращает false в обработчик событий.
Объекты: form.
onLoad - событие load происходит, когда браузер завершает загрузку изображения, окна или всех фреймов внутри тега .
Объекты: window, image.
onUnload - событие unload происходит, когда вы выходите из документа.
Обработчики событий onLoad и onUnload описываются внутри тегов или , например, .
События onLoad и onUnload, описанные внутри фрейма в теге , происходят перед аналогичными событиями, описанными в теге .
Объекты: window.
onError - событие error происходит, когда при загрузке документа или изображения произошла ошибка.
Объекты: window, image.
onAbort - событие abort происходит, когда загрузка изображения прервана пользователем.
Объекты: image.
Чтобы отключить стандартную обработку события, обработчик должен возвратить логическое значение FALSE (return false).
Исключение : для отмены стандартной обработки событий onMouseOver, onMouseOut, onError обработчик должен возвратить логическое значение TRUE (return true).
