DHTML

События динамичеcкого HTML

Пример 1

<h2>Всплывание события</h2>
<p>
    Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:
</p>
<p>
    <a href="be.htm">
        <img src="be.gif" alt="Людвиг ван Бетховен" style="vertical-align: middle;">Кто это?
    </a>
</p>

Действие по умолчанию обеспечивается встроенной в броузер обработкой событий. Например, действием по умолчанию на нажатие ссылки <a href="…"> является переход по указанному адресу и загрузка страницы. Многие события позволяют заменить встроенные действия по умолчанию на индивидуальную обработку.

Связывание событий

Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.

Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.

Пример 2

<h2>Смена графического объекта</h2>
<p>
    Для смены графического объекта переместите на него мышку –
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.<br>
    Уведите с него мышку –
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
</p>
<a href="" onmouseover="document.getElementById('B_B').src='ba.gif'"
   onmouseout="document.getElementById('B_B').src='be.gif'">
    <img id="B_B" src="be.gif">
</a>

Пример 3

<h2>Изменение вида данного элемента</h2>
<p class="b" onmousedown="this.style.fontStyle='italic'; this.style.color='red'"
   onmouseup="this.style.fontStyle=''; this.style.color='black'">
    Для изменения цвета и стиля шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>

Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.

Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:

Пример 4

<h2>Изменение вида данного элемента</h2>
<p class="b" id="B4">
    Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>
<script>
    document.getElementById('B4').onmousedown=new
        Function("this.style.fontStyle='italic'; this.style.color='red';");
    document.getElementById('B4').onmouseup=new
        Function("this.style.fontStyle=''; this.style.color='black';");
</script>

Можно также использовать метод addEventListener():

Пример 5

<h2>Изменение вида данного элемента</h2>
<p class="b" id="B5">
    Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>
<script>
    document.getElementById("B5").addEventListener("mousedown", reditalic);
    document.getElementById("B5").addEventListener("mouseup", blacknormal);

    function reditalic() {
        document.getElementById('B5').style.fontStyle='italic'; document.getElementById('BBB').style.color='red';
    }
    function blacknormal() {
        document.getElementById('B5').style.fontStyle=''; document.getElementById('BBB').style.color='black';
    }
</script>

События мыши

OnMouseOver

Перемещение указателя мыши на элемент.

OnMouseOut

Перемещение указателя мыши за пределы элемента.

OnMouseDown

Нажатие любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.

OnMouseUp

Отпускание любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка отпущена: 1 = левая, 2 = правая, 4 = средняя.

OnMouseMove

Перемещение указателя мыши. Внутри обработчика event.x и event.y – текущие координаты "горячей" точки курсора на экране.

OnClick

Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при каком-то элементе в фокусе.

OnDblClick

Двойной щелчок левой кнопкой мыши на элементе.

OnDragStart

Запуск операции перетаскивания. Цель – запретить операцию перетаскивания путем возвращения значения false.

OnSelectStart

Запуск операции выделения элемента. Цель – запретить выделение области документа. Важно учесть, что отменяется лишь инициализация выделения, т.е. если выделение начато за пределами данной области, а на ней лишь продолжается, то помешать выделению нельзя. Событие OnSelectStart всплывающее, поэтому можно перехватить его и вернуть значение false. Это лишит посетителя возможности выделять текст на странице (см. Пример 10).

OnSelect

Выделение элемента. Следует за OnSelectStart и возникает много раз по мере того, как посетитель расширяет или сужает выделение. Событие OnSelect не всплывает. Оно возникает лишь в том разделе документа, где происходит выделение.

События клавиатуры

OnKeyPress

Нажатие и отпускание клавиши. Событие возникает много раз, если клавиша удерживается.

OnKeyDown

Нажатие клавиши. Событие возникает один раз, даже если клавиша продолжает удерживаться.

OnKeyUp

Отпускание клавиши.

Событие прокручивания

OnScroll

Использование полосы прокрутки или прокручивание элемента неявно посредством другого действия Не может отменить прокручивания, так как возникает после завершения прокручивания. Не всплывает.

События фокуса

OnFocus

Возникает, когда элемент активизируется после щелчка по нему мышью или с помощью клавиатуры. Фокус могут получить только элементы пользовательского ввода и тело документа, а не элементы содержания документа.

OnBlur

Возникает, когда элемент теряет фокус. Используется для контроля корректности ввода.

Пример 6

<html>
<head>
    <meta charset="utf-8">
    <script>
        function verify()
        {
            //Ввод строки
            var str=document.inp.m.value;
            //Преобразование строки в число
            var int=parseInt(str);
            //Проверка
            if ( int == 1 || int == 2 || int == 12 )
                {alert("Зима");}
            else if ( 3 <= int && int <= 5 )
                {alert("Весна");}
            else if ( 6 <= int && int <= 8 )
                {alert("Лето");}
            else if ( 9 <= int && int <= 11 )
                {alert("Осень");}
            else
                {alert("Неверно!");}
        }
    </script>
</head>
<body>
<h2>Контроль ввода</h2>
<form name="inp">
    <label>Введите номер текущего месяца:
        <input name="m" size="2" OnBlur="verify()">
    </label>
</form>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

События формы

OnChange

Возникает при любых изменениях в форме. Для текстового поля это ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur используется для контроля корректности ввода.

OnSubmit

Возникает перед отправкой содержимого формы на сервер. Основное назначение – проверка корректности введенных данных. Отмена передачи данных происходит при возвращении значения false. При выполнении примеров 6 и 7 обратите внимание на различия в окне "Адрес" при наборе неверного значения.

Пример 7

<html>
<head>
    <meta charset="utf-8">
    <script>
        function verify()
        {
            //Ввод строки
            var str=document.inp.m.value;
            //Преобразование строки в число
            var int=parseInt(str);
            //Проверка
            if ( int == 1 || int == 2 || int == 12 )
                {alert("Зима");
                return true;}
            else if ( 3 <= int && int <= 5 )
                {alert("Весна");
                return true;}
            else if ( 6 <= int && int <= 8 )
                {alert("Лето");
                return true;}
            else if ( 9 <= int && int <= 11 )
                {alert("Осень");
                return true;}
            else
                {alert("Неверно!");
                return false;}
        }
    </script>
</head>
<body>
<h2>Контроль ввода</h2>
<form name="inp" OnSubmit="return verify()">
    <label>Введите номер текущего месяца:
        <input name="m" size="2">
    </label>
</form>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

OnReset

Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.

События документа

OnLoad

Возникает после считывания, но до отображения страницы. Используется для отображения заставки, проверки права доступа и других однократных действий при инициализации страницы. Как надо, не работает (см. пример 8).

Пример 8

<body OnLoad="alert('Начнем?')">
<h2>Начали</h2>
</body>

ПОСМОТРИ РЕЗУЛЬТАТ

OnUnload

Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений.

OnAbort

Возникает при срыве загрузки графического объекта.

OnError

Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.

Пример 9

<h2>Перехват ошибок</h2>
<img src="m.gif" OnError="alert('Что-то не так!');">

ПОСМОТРИ РЕЗУЛЬТАТ

Событие помощи

OnHelp

Запрос файла справки с использованием клавиши <F1>. Не возникает при выборе пункта Help из меню Help. OnHelp возникает на элементе с фокусом и затем всплывает вверх по иерархии контейнеров. Действие по умолчанию для этого события заключается в отображении встроенного файла справки, но данное событие может быть отменено для отображения индивидуального файла справки.

Объект event

Для получения информации о событии служит объект event.

Свойства объекта event

srcElement

Элемент, который первым сгенерировал событие. Имя тега этого элемента можно определить с помощью свойства tagName (см. пример 12).

cancelBubble

Используется для прекращения всплывания события вверх по иерархии контейнеров. По умолчанию равно false и событие всплывает. Установка значения true останавливает всплывание текущего события.

returnValue

Используется для отмены действия по умолчанию. Для этого нужно установить значение false. Ключевое слово return в JavaScript обновляет значение event.returnValue при возвращении управления броузеру.

Пример 10

<body OnSelectStart="event.returnValue=false;">
<h2>Запрет выделения</h2>
</body>

ПОСМОТРИ РЕЗУЛЬТАТ

type

Определение события. Имя события возвращается в нижнем регистре без префикса on.

Пример 11

<html>
<head>
    <meta charset="utf-8">
    <script>
        function S()
        {
            if (event.type=="mousedown")
            {B.style.fontStyle="italic";
                B.style.color="red";}
            if (event.type=="mouseup")
            {B.style.fontStyle=""; B.style.color="blue";}
        }
    </script>
</head>
<body>
<h2>Изменение вида данного элемента</h2>
<b><p id="B" OnMouseDown="S()" OnMouseUp="S()">
        Для изменения цвета и шрифта данного текста нажимайте и
        отпускайте кнопку мыши<br></b>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

button

Состояния кнопок мыши во время события.
Возможные значения:

• 0 – кнопки не нажаты,
• 1 – нажатие левой кнопки,
• 2 – нажатие правой кнопки,
• 3 – нажатие левой и правой кнопок,
• 4 – нажатие средней кнопки.

clientX, clientY

Координаты указателя мыши относительно клиентской области окна.

offsetX, offsetY

Координаты указателя мыши относительно контекста воспроизведения.

screenX, screenY

Координаты указателя мыши относительно экрана.

Пример 12

<html>
<head>
    <meta charset="utf-8">
    <script for="document" event="onmousedown()">
        alert("x:"+event.clientX+"\n"+
            "y:"+event.clientY+"\n"+
            "тег:"+event.srcElement.tagName);
    </script>
</head>
<body>
<h2>Определение координат указателя мыши</h2>
<p>Щелкните любой кнопкой мыши на любом месте экрана</p>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

altKey

Состояние клавиши <Alt>(true/false).

ctrlKey

Состояние клавиши <Ctrl>(true/false).

shiftKey

Состояние клавиши <Shift> (true/false).

keyCode

ASCII-код нажатой клавиши.

Динамическое содержание

Содержание HTML-документа можно менять после загрузки страницы.

Свойства динамического содержания

innerText

Содержащийся внутри элемента текст без тегов. При установке нового значения все HTML-теги выводятся как текст.

innerHTML

Содержащийся внутри элемента текст вместе с внутренними тегами. При установке нового значения все HTML-теги интерпретируются броузером.

outerText

Содержащийся внутри элемента текст без тегов. При установке нового значения меняется весь элемент, включая внешние теги. Нестандартное свойство! Не стоит использовать, т.к. не поддерживается браузером Firefox.

outerHTML

Весь элемент, включая внешние теги. При установке нового значения все HTML-теги интерпретируются броузером.

Пример 13

<h2>Различия свойств innerText, innerHTML, outerText, outerHTML</h2>
<p>Для изменения текстов щелкните по ним мышкой</p>
<h2 onmousedown="this.innerText='Так работает <em>innerText</em>'">Текст1</h2>
<h2 onmousedown="this.innerHTML='Так работает <em>innerHTML</em>'">Текст2</h2>
<h2 onmousedown="this.outerText='Так работает <em>outerText</em>'">Текст3</h2>
<h2 onmousedown="this.outerHTML='<p>Так работает <em>outerHTML</em>'">Текст4</h2>

ПОСМОТРИ РЕЗУЛЬТАТ

Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.

Методы Adjacent

Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:

insertAdjacentText

Вставка текста.

insertAdjacentHTML

Вставка HTML.

Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:

• beforeBegin – До открывающего внешнего тега элемента
• afterBegin – После открывающего тега до содержимого элемента
• beforeEnd – До закрывающего тега после содержимого элемента
• afterEnd – После закрывающего тега элемента

Пример 14

<h2>Различия ключей beforeBegin, afterBegin, beforeEnd, afterEnd</h2>
<p>Для вставки в тексты щелкните по ним мышкой</p>
<h2 onmousedown="insertAdjacentHTML('beforeBegin','Вставка(<i>beforeBegin</i>)')">Tекст1</h2>
<h2 onmousedown="insertAdjacentHTML('afterBegin','Вставка (<i>afterBegin</i>)') ">Текст2</h2>
<h2 onmousedown="insertAdjacentHTML('beforeEnd','Вставка(<i>beforeEnd</i>)') ">Текст3</h2>
<h2 onmousedown="insertAdjacentHTML('afterEnd','Вставка(<i>afterEnd</i>)')">Текст4</h2>

ПОСМОТРИ РЕЗУЛЬТАТ

Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.

Объект TextRange

Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.

Объект TextRange создается путем вызова метода createTextRange элемента, который является, так называемым, владельцем редактирования текста. Это может быть body, input, button и textarea, причем понятно, что body - владелец редактирования текста для всех воспроизводимых элементов, а input, button и textarea - владельцы редактирования текста для своего содержания.

Свойства доступа к тексту

text

Текст документа без HTML-разметки. Это свойство доступно для чтения/записи. По представлению содержания сходно с outerText.

htmlText

Текст документа вместе с HTML-разметкой. По представлению содержания это свойство сходно с outerHTML, но доступно только для чтения.

Метод вставки HTML

pasteHTML

При вызове этого метода для определенного элемента вставляемый фрагмент будет находиться внутри области действия данного элемента и должен быть HTML-кодом внутри данной области действия. По представлению содержания сходно с outerHTML.

Методы позиционирования объекта TextRange

collapse([prm1])

Сворачивает объект TextRange к началу (prm1=true) или к концу элемента (prm1=false). Значение по умолчанию prm1=true.

expand(prm1)

Расширяет объект TextRange для полного охвата определенного параметром фрагмента текста.
Параметр prm1 может принимать значения:

• character – символ,
• word – слово,
• sentence – предложение.

moveToElementText(prm1)

Размещает объект TextRange для охвата текста элемента, указанного параметром prm1.

move(prm1, prm2)

Перемещает начало объекта TextRange на расстояние, указанное параметрами, и сжимает объект до точки. Параметр prm1 для этого и двух следующих методов может принимать те же значения, что и для метода expand. Параметр prm2 может принимать как положительные, так и отрицательные значения; указывает расстояние перемещения.

moveStart(prm1, prm2)

Перемещает начало объекта TextRange на расстояние, указанное параметрами.

moveEnd(prm1, prm2)

Перемещает конец объекта TextRange на расстояние, указанное параметрами.

Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.

Пример 15

<html>
<head>
    <meta charset="utf-8">
    <script>
        function ToAndFro(c)
        {
            var tr=document.body.createTextRange(); // Создание объекта TextRange
            var o = eval(c);
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveStart("word",1); // Сдвиг начала на 1 вперед
            var St = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveEnd("word",1); // Сдвиг конца на 1 вперед
            var En = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveStart("word",-1); // Сдвиг начала на 1 назад
            var St1 = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveEnd("word",-1); // Сдвиг конца на 1 назад
            var En1 = tr.text; // Сохранение содержимого
// Вывод результатов
            alert('tr.moveStart("word",1) = '+St+
                '\ntr.moveEnd("word",1) = '+En+
                '\ntr.moveStart("word",-1) = '+St1+
                '\ntr.moveEnd("word",-1) = '+En1);
        }
    </script>
</head>
<body>
<h2>Перемещения начала и конца объекта textarea</h2>
<textarea OnMouseOver="ToAndFro('a')">Наведите сюда указатель мышки</textarea>

ПОСМОТРИ РЕЗУЛЬТАТ

moveToPoint(prm1, prm2)

Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.

Пример 16

<html>
<head>
    <meta charset="utf-8">
    <script language="JavaScript">
        <!--
        function WhatIsWord()
        {
            // Создание объекта TextRange
            var tr=document.body.createTextRange();
            // Свертка в точку, куда указывает мышка
            tr.moveToPoint(event.clientX,
                event.clientY);
            // Расширение до слова, над которым указатель мышки
            tr.expand("word");
            // Отображение содержимого
            window.status = tr.text;
        }
        //-->
    </script>
</head>
<body lang=RU onmousemove="WhatIsWord();">
<h2>Отображение в строке состояния слова, над которым находится
    указатель мыши</h2>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

findText(prm1, prm2, prm3)

Поиск в документе подстроки, указанной в параметре prm1. Параметр prm2 определяет число символов для поиска (положительное - прямое направление, отрицательное - обратное). Параметр prm3 может принимать значения:

• 2 – полное совпадение,
• 4 – учет регистра,
• 6 – полное совпадение с учетом регистра.

Методы управления объектом TextRange

duplicate

Создает копию объекта TextRange, из которого он был вызван ( var tr1=document.body.createTextRange();  var tr2=tr1.duplicate(); ).

inRange

Определяет нахождение указанной области внутри объекта TextRange, из которого был вызван данный метод (alert(tr2.inRange(tr1)); // true).

isEqual

Сравнивает два объекта TextRange для определения, охватывают ли они один и тот же текст ( alert(tr1.isEqual(tr2)); // true ). Метод необходим, так как прямое сравнение для разных объектов, представляющих одну и ту же текстовую область работать не будет ( alert(tr1==tr2); // false).

compareEndPoints(prm1, prm2)

Сравнивает два объекта TextRange для определения, совпадают ли их начальные и конечные позиции. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод сравнивает. Возможные значения prm1:

• StartToStart – начало первого с началом второго,
• StartToEnd – начало первого с концом второго,
• EndToStart – конец первого с началом второго,
• EndToEnd – конец первого с концом второго.

setEndPoints(prm1, prm2)

Устанавливает начальную и конечную позиции одного объекта TextRange в начальную и конечную позиции другого объекта TextRange. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод устанавливает. Возможные значения prm1:

• StartToStart – начало первого в начало второго,
• StartToEnd – начало первого в конец второго,
• EndToStart – конец первого в начало второг,о
• EndToEnd – конец первого в конец второго.

Например, чтобы определить, будет ли продолжен объект trSecond после окончания объекта trOne, надо написать такую функцию:
function continue(trOne, trSecond)
{ return trOne.compareEndPoints("EndToStart", trSecond); }.

Читать дальше: Звук и музыка на web-странице

.
Прокомментировать/Отблагодарить