Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 7:

Использование локального JavaScript - контента на мобильном устройстве

События в JavaScript

Действительная мощь совместного использования JavaScript и НТML5 проявляется, когда для выполнения сценария программа ожидает определенных действий пользователя. Например, вы можете запустить программу JavaScript, когда пользователь выполнит щелчок по определенной ссылке. Помимо пользователя, инициатором событий может выступать и система. Например, к числу системных относится событие load, которое срабатывает после полной загрузки документа. В подобных случаях следует использовать обработчик события HTML5. При этом страница сможет распознать некоторое действие (или событие - events), для определения которого используется встроенная функция. HTML5 позволяет распознавать множество событий. Некоторые из них происходят автоматически - как, например, событие окончания загрузки страницы. Другие события происходят, когда пользователи выполняют некоторые действия (касание, ввод данных). Примеры событий HTML5:

onchange onclick ondbleclick ondrag ondragend
ondragenter ondragleave ondragover ondragstart ondrop
onkeydown onkeypress onkeyup onmousedown onmousemove
onmouseout onmouseover onmouseup onmousewheel onpause
onplay onplaying onprogress onloadstart onload

Чтобы эффективно использовать события, нужно знать, какие события поддерживаются в JavaScript. Кроме того, нужно знать, какие события с какими элементами HTML5 работают. Далее перечислены наиболее часто используемые события и элементы HTML, к которым они применимы. Более полное справочное руководство находится по адресу[6].

Таблица 11.2.
Название события Срабатывает Применимо
onClick При щелчке (касании) по элементу Практически ко всем элементам
onMouseOver При наведении указателя (пальца, стилуса) на элемент Практически ко всем элементам
onMouseOut Когда указатель убирается с элемента Практически ко всем элементам
onFocus При получении фокуса элементом (т. е. при выделении элемента пальцем, стилусом). <select>, <input>, <textarea>, <a>, <button>
onBlur Когда элемент теряет фокус <select>, <input>, <textarea>, <a>, <button>
onChange При изменении значения элемента ввода. В случае текстового поля срабатывает только после перехода на другой элемент <select>, <input type="text">, <textarea>
onError При ошибке загрузки изображения (обычно по причине неправильного URL) <img>
onLoad По окончанию загрузки новой страницы или объекта, такого, как изображение <img>, <body>
onUnload Когда браузер выгружает страницу. Это обычно происходит при переходе на новый URL в строке адреса или по ссылке. Срабатывание происходит до того, как браузер загрузит новую страницу <body>

Событие onClick используемся в разработках чаще всего. При создании мобильных приложений приходится выполнить тестирование, чтобы определить, где лучше применить данное событие. На устройствах с сенсорным интерфейсом поведение также будет простым: каждое касание (пальцем или стилусом) передается как щелчок по экрану. Технология множественного касания реализуется нестандартными событиями ontouchstart, ontouchmove, ontouchend, ontouchcancel.

Обработчики событий. Обработчик как свойство элемента

Каким образом код связывается с событием элемента? В HTML5 это можно сделать двумя способами: можно зарегистрировать обработчик событий как свойство элемента или использовать новый стандартный метод addEventListener(). Рассмотрим старый, традиционный способ задания обработчика, используя свойства элемента, над которым пользователь выполняет действие.

Для этого необходимое событие нужно добавить в элемент в качестве атрибута, а в качестве значения этого атрибута указать требуемую функцию. Таким образом, если мы хотим связать определенный код с событием onLoad элемента <body>, то можем это сделать так:

<body onload ="ShowMessage();">

В данном случае для элемента body используется обработчик события onLoad, который запускает функцию JavaScript ShowMessage(). Функция, вызываемая в ответ на срабатывание события, и называется обработчиком события.

Названия обработчиков событий составляют добавлением префикса on к названию события. Например, имя обработчика события click - onclick.

Далее представлена html - разметка, содержащая JavaScript - код программы, обрабатывающей три разных события - щелчок по заголовку, щелчок по абзацу и щелчок по тексту выведенной страницы.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
 body, #Rezult {
  background-color: #9bf3f1;
  color:#0C080C;
  font-family:Verdana, Geneva, sans-serif;
 font-size:55px;
 margin-left:30px;/*отступ слева*/
}
p {
  font-family:Verdana, Geneva, sans-serif;
  color:#FF0;
  background-color:#00F;
  font-size:44px;
  text-align:center;
  font-weight:bold;
}
</style>
<script type="text/javascript">
 
 function showArticle() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по тексту";
 }
 function showHeader() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по заголовку";
 }
 function showP() {
 var myObject = document.getElementById("Rezult");
 myObject.innerHTML = "Вы выполнили щелчок по синему абзацу <P>";
 }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Обработчик события OnClick в любом элементе</title>
</head>

<body>
<article>
 <header onClick="showHeader()">
 <h3>Это ЗАГОЛОВОК</h3>
 </header>
 <p onClick="showP()">Выполните щелчок по этому абзацу</p>
 <section onClick="showArticle()">
 Это обычный текст в контейнере section. Щелкните здесь и посмотрите, что произойдет. 
 </section>
 <p id ="Rezult"></p>
</article>
</body>
</html>

В каждой из функций программы создается пользовательский объект myObject, позволяющий манипулировать тегом страницы с id="Rezult", модифицируя его содержание в соответствии с событием. Результат тестирования программы для трех разных событий, вызывающих ее разные функции: onClick="showHeader()", onClick="showP(), onClick="showArticle() приводится ниже.

Обработка событий методом addEventListner()

Использование метода addEventListener() - это идеальная техника, к тому же стандартизированная в спецификации HTML5. Данный метод принимает три аргумента: тип события, исполняемую функцию и булево значение (значение логического типа). Синтаксис метода addEventListener() иллюстрируется в следующем примере разметки, содержащей JavaScript - код:

<!DOCTYPE html> 
<html> 
 <head>
<title>Создаем слушателя</title> 
<script type="text/javascript">
function show() {
 document.getElementById("my_p").innerHTML = "Ты щелкнул и изменил портрет!";
 document.getElementById("my_img").src = "images/woman.png";
}
function clickme(){
 var pelement = document.getElementById('my_p'); 
 pelement.addEventListener('click', show, false);
}
window.addEventListener("load", clickme, false);
</script>
</head> 
<body>
<p id ="my_p" style ="font-size: 60px">Щелкни здесь</p>
<img id ="my_img" src ="images/girl.png" />
</body> 
</html>

Здесь два использования метода addEventListener():

pelement.addEventListener('click', show, false);
  window.addEventListener("load", clickme, false);

Первый атрибут в обоих случаях - это имя события (click - щелчок, load - загрузка страницы). Второй - функция, которая будет исполняться при наступлении события (show, clickme) . Это может быть ссылка на функцию (как в нашем случае) или просто анонимная функция (не имеющая имени). Третий атрибут, принимающий значение true или false, указывает, каким образом срабатывают множественные события. В функции clickme() мы присвоили ссылку на элемент переменной под названием pelement, а затем, используя эту переменную, добавили прослушиватель для события click этого элемента (тег <p>). Результат использования методов addEventListener() в данном коде:

Даже если в результате применения этого и предыдущего методов обработки событий получаются одинаковые результаты, у addEventListener() все же остается огромнее преимущество по сравнению с любыми другими подходами - он позволяет добавить неограниченное число прослушивателей для одного и того же элемента. Таким образом, это просто идеальная реализация для интерактивных мобильных приложений.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?