Добавляем...


Привязка событий в (X)HTML
HTML поддерживает привязку событий для большинства элементов. Эта привязка реализуется с помощью атрибутов элемента типа onclick или onmouseover, которым можно назначить программный код JavaScript, выполняющийся, когда в объекте происходит соответствующее событие. В ходе анализа страницы браузером создается иерархия объектов документа, и обработчики событий наполняются программным кодом JavaScript, привязанным к элементам с помощью указанных атрибутов. Рассмотрите следующий простой пример, в котором определяется обработчик события click для ссылки:

<a href="http://www.w3c.org/DOM" onclick="alert('Теперь перейдем на страницу DOM');">Информация о модели DOM консорциума W3C</a>

Замечание. В традиционном HTML регистр символов не учитывается, но в (X)HTML для имен элементов и атрибутов требуются символы нижнего регистра. Так что, хотя в Web-страницах часто встречаются "onClick" или даже "ONCLICK", использование "onclick", где присутствуют только символы нижнего регистра, является более правильным.

Атрибуты событий (X)HTML связаны, в частности, с такими действиями пользователя, как щелчки мышью или нажатие клавиш. Основные атрибуты обработки событий, поддерживаемые в (X)HTML, приводятся в таблице.

Атрибут события Описание события Допустимые элементы стандартного (X)HTML
onblur Возникает при потере элементом фокуса ввода (когда пользователь активизирует другой элемент, обычно либо с помощью щелчка на нем, либо с помощью клавиши табуляции) <a>, <area>, <button>, <input>, <label>, <select>, <textarea>;
также <applet>, <div>, <embed>, <hr>, <img>, <marquee>, <object>, <span>, <table>, <td>, <tr>; в IE4+и N4 также <body>; в N4 также <frameset>, <ilayer>, <layer>
onchange Потеря фокуса ввода полем формы, когда значение поля было модифицировано во время доступа к нему <input>, <select>, <textarea>
onclick Выполнение щелчка на элементе Большинство элементов изображения*; в IE4+также <applet>, <font>
ondblclick Выполнение двойного щелчка на элементе Большинство элементов изображения*; в IE4+ также <applet>, <font>
onfocus Получение фокуса ввода элементом (например, при выборе элемента пользователем для манипуляций или ввода данных) <a>, <area>, <button>, <input>, <label>, <select>, <textarea>;
в IE4+ также <applet>, <div>, <embed>, <hr>, <img>, <marquee>, <object>, <span>, <table>, <td>, <tr>;
в IE4+ и N4 также <body>; eN4Tarae<frameset>, <ilayer>, <layer>
onkeydown Нажатие клавиши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; в1Е4+также <applet>, <font>
onkeyup Освобождение ранее нажатой клавиши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; в IE4+ также <applet>, <font>
onload Окончание загрузки объекта (как правило, окна или фрейма) в браузер <body>, <frameset>;
в IE4+ также <applet>, <embed>, <link>, <script>, <style>; в N4 также <ilayer >, <layer>;
в IE4+ и N4 также <img>
onmousedown Нажатие кнопки мыши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*;
в IE4+ также <applet>, <font>
onmousemove Движение указателя мыши, когда он находится на элементе Большинство элементов изображения*; в IE4+ также <applet>, <font>
onmouseout Смещение указателя мыши с элемента (в результате чего указатель оказывается за пределами данного элементе) Большинство элементов изображения*; в IE4+ также <applet>, <font>; в N4 также <ilayer>, <layer>
onmouseover Помещение указателя мыши на элемент Большинство элементов изображения*; в IE4+ также <applet>, <font>; в N4 также <ilayer>, <lауег>
onmouseup Освобождение ранее нажатой кнопки мыши в то время, когда элемент имеет фокус ввода Большинство элементов изображения*; в IE4+ также <applet>, <font>
onreset Возвращение формы в исходное состояние (например, с помощью нажатия кнопки "Сброс") <form>
onselect Выбор текста пользователем (как правило, путем подсветки текста с помощью мыши) <input>, <textarea>
onsubmit Отправка формы серверу (обычно в результате щелчка на кнопке "Подача запроса") <form>
onunload Выгрузка браузером текущего документа из окна или фрейма <body>, <frameset>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Привязка событий в HTML </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload='alert("Пример загружен");' onunload='alert("Пример выгружен");'>
<h1 align="center">Привязка событий в HTML </h1>
<form action="#" method="get" onreset="alert('Сброс формы');"
onsubmit="alert('Форма отправлена');return false;">
<ul>
<li>onblur:
<input type="text" value="Щелкните здесь и покиньте поле"
size="40" onblur="alert('Фокус потерян');" /><br /><br /></li>
<li>onclick: <input type="button" value="Click me"
onclick="alert('Щелчек о кнопке');" /><br /><br /></li>

<li>onchange: <input type="text" value="Измените текст и выйдите"
size="40" onchange="alert('Изменено');" /><br /><br /></li>
<li>ondblclick: <input type="button" value="Кликниете двойным щелчком"
ondblclick="alert('Был двойной щелчек');" /><br /><br /></li>
<li>onfocus: <input type="text" value="Щелкните в поле"
onfocus="alert('Получили фокус');" /><br /><br /></li>
<li>onkeydown:
<input type="text" value="Нажмите клавишу и задержите её" size="40"
onkeydown="alert('Клавиша нажата');" /><br /><br /></li>
<li>onkeypress:
<input type="text" value="Печатайте здесь" size="40" onkeypress="alert('Клавиша нажата');" />

<br /><br /></li>
<li>onkeyup: <input type="text" value="Нажмите и отпустите клавишу" size="40"
onkeyup="alert('Клавиша нажата');" /><br /><br /></li>
<li>onload: Это сообщение было показано при загрузке документа.<br /><br /></li>
<li>onmousedown:
<input type="button" value="Нажмите и задержите кнопку мыши" onmousedown="alert('Кнопка мыши нажата');" /><br /><br /></li>
<li>onmousemove: Проведите мышкой здесь
<a href="#" onmousemove="alert('Мышь подведена');">Ссылка</a><br /><br /></li>
<li>onmouseout: Поместите указатель
<a href="#" onmouseout="alert('Мышь убрана');">Тут</a> Сюда.
<br /><br /></li>
<li>onmouseover: Поместите указатель
<a href="#" onmouseover="alert('Указатель на обьекте');">ссылка</a><br /><br /></li>
<li>onmouseup:
<input type="button" value="Нажмите и отпустите"
onmouseup="alert('Кнопка отпущена');" /><br /><br /></li>
<li>onreset: <input type="reset" value="Сброс формы" /><br /><br /></li>
<li>onselect: <input type="text" value="Выдели часть текста" size="40"
onselect="alert('Выделено');" /><br /><br /></li>
<li>onsubmit: <input type="submit" value="Проверка SUBMIT" /><br /><br /></li>
<li>onunload: Покинте документ щелкнув на это <a
href="http://www.google.com">Ссылка</a><br /><br /></li>
</ul>
</form>
</body>
</html>

Кроме событий, определенных спецификациями (X)HTML, браузеры могут поддерживать и другие события. В частности, Microsoft предлагает множество событий, соответствующих более сложным действиям мыши (например, перетаскиванию) и элементов (например, движению текста <marquee>), а также событиям, связанным с загрузкой данных. Некоторые из этих событий описаны дальше. Указанные события не являются стандартными и обычно наиболее полезны во внутреннем сетевом окружении, где можно гарантировать совместимость браузеров. Мы здесь не собираемся подробно обсуждать эти события, но вы можете найти дополнительную информацию на странице msdn.microsoft.com. Поиск в Web с помощью запроса site.msdn. microsoft.com dhtml events в системе Google тоже дает нужный результат.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика