Event Model в Java Script

Event Model, или модель событий – это способность языка JavaScript реагировать на изменение состояния документа в браузере, например нажатие на ссылку или отправка заполненной формы.

Ниже приведены основные события, которые поддерживаются всеми современными браузерами:

onblur – происходит, когда пользователь убирает фокус с элемента, например элемента формы;

onchange – происходит, когда элемент формы теряет фокус, и его значение при этом изменилось;

onclick – происходит, когда пользователь нажимает на любой визуальный элемент;

ondblclick – аналогично предыдущему, но при двойном нажатии;

onfocus – происходит, когда элемент получает фокус, то есть пользователь выбирает этот элемент;

onkeydown – происходит, когда пользователь нажимает клавишу на клавиатуре;

onkeypress – происходит, когда пользователь нажимает и отпускает клавишу на клавиатуре;

onkeyup – происходит, когда пользователь отпускает нажатую клавишу;

onload – происходит, когда документ (или фрейм) загружен;

onmousedown – происходит, когда пользователь нажимает клавишу мыши;

onmousemove – происходит, когда пользователь двигает курсором мыши над элементом;

onmouseout – происходит, когда указатель мыши покидает область элемента;

onmouseover – происходит, когда указатель мыши попадает в область элемента;

onmouseup – происходит, когда пользователь отпускает нажатую клавишу мыши;

onreset – происходит, когда значения элементов формы сбрасываются;

onselect – происходит, когда пользователь выделяет текст в элементе формы;

onsubmit – происходит, когда пользователь отсылает форму;

onunload – происходит, когда пользователь покидает текущий документ, то есть закрывает браузер или переходит к другой странице.

События в HTML прописываются следующим способом:

<a href=”sample.html”

onclick=”alert(‘Links clicked’)”>click me</a>

<!– пример # 10: получение типа броузера –>

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

<h1 align=center>Проверка типа браузера</h1>

<hr>

Чтобы получить имя вашей программы просмотра, следует выбрать кнопку "Browser"

<P><hr><form name=fr>

<input type=button name=browser value=Browser

onClick="window.alert(window.navigator.appName)">

</form>

</body> </html>

Динамическое назначение событий

Кроме объявления событий в HTML, JavaScript позволяет назначать события во время выполнения скрипта:

<a href="sample.html" id="lnk1">click me</a>

<script type="text/javascript">

document.getElementById("lnk1").

onclick = function(){alert(‘Links clicked’)};

</script>

Ключевое слово this

Зачастую обработчику события необходимо передать элемент, который это событие вызвал. Пример приведен ниже:

<a href="sample.html" onclick="showInfo(this);">

click me</a>

< type="text/javascript">

function showInfo(_obj) {

alert(_obj.innerHTML);

//при нажатии на ссылку выводится на экран «click me»

}

</script>

По умолчанию после нажатия на ссылку происходит переход на другую страницу, однако это действие можно отменить, если обработчик события вернет значение false. Например:

<a href="sample.html"

onclick="return showInfo(this);">click me</a>

<script type="text/javascript">

function showInfo(_obj) {

return confirm("Do you want go to another page?");

//при нажатии на ссылку будет выведен стандартный диалог с кнопками OK и Cancel; если будет нажата Cancel, то браузер не перейдет по адресу, на который указывает ссылка

}

</script>

Примеры на JavaScript:

<!– пример # 11: открытие документа в новом окне –>

<html>

<head>

<script type="text/javascript">

function openStaticWin() {

window.open("test.html", "_blank",

"height=200,width=400,status=yes,toolbar=no,menubar=no,

location=no");

}

function openDynamicWin() {

var newWin = window.open();

newWin.document.open();

newWin.document.write("<html><head></head><body>"

+ new Date() + "</body></html>");

newWin.document.close();

}

</script>

</head>

<body>

<a href="#" onclick="openStaticWin();

return false;">open existing html</a>

<br>

<a href="#" onclick="openDynamicWin();

return false;">open dynamic html</a>

</body>

</html>

Первая функция открывает в новом окне существующий документ, вторая задает HTML-код нового документа динамически.

Следующий пример:

<!– пример # 12: создание динамического меню после загрузки страницы –>

<html><head>

<style>

.menuContainer {

border: 1px solid #123456;

}

.menuContainer .menuItem {

float: left;

margin: 2px;

padding: 10px;

}

.menuContainer .menuOver {

background-color: #808080;

}

.menuContainer .menuOver a {

color: #800000;

font-weight: bold;

}

.menuContainer .clear {

clear: left;

}

</style>

<script type="text/javascript">

function processMenu() {

var allDiv = document.getElementsByTagName("DIV");

for (var i = 0; i < allDiv.length; i++) {

if (allDiv[i].className == "menuContainer")

processMenuItem(allDiv[i]);

}

}

function processMenuItem(_obj) {

var allChilds = _obj.childNodes;

for (var i = 0; i < allChilds.length; i++) {

if (allChilds[i].className == "menuItem") {

allChilds[i].onmouseover = function() {

this.className += " menuOver";

}

allChilds[i].onmouseout = function() {

this.className =

this.className.replace(" menuOver","");

}

}

}

}

</script>

</head>

<body onload="processMenu();">

<div class="menuContainer">

<div class="menuItem"><a href="#">first</a></div>

<div class="menuItem"><a href="#">second</a></div>

<div class="menuItem"><a href="#">third</a></div>

<div class="menuItem"><a href="#">fourth</a></div>

<div class="clear"></div>

</div>

</body></html>

<!– пример # 13: валидация формы –>

<script type="text/javascript">

function submitForm(_form) {debugger;

markErrorField(false);

var errMess = "";

if (!_form.elements["login"].value) {

errMess += "Your Login is empty.\n";

markErrorField(_form.elements["login"]);

}

if (!_form.elements["mail"].value) {

errMess += "Your Email is empty\n";

markErrorField(_form.elements["mail"]);

}

if (!_form.elements["pass"].value) {

errMess += "Your Password is empty.\n";

markErrorField(_form.elements["pass"]);

} else if (!_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation is empty.\n";

markErrorField(_form.elements["confpass"]);

} else if

(_form.elements["pass"].value !=

_form.elements["confpass"].value) {

errMess +=

"Your Password confirmation does not equal to your Password.\n";

markErrorField(_form.elements["pass"]);

markErrorField(_form.elements["confpass"]);

}

if (errMess) {

alert(errMess + "");

return false;

}

}

function markErrorField(_element) {

var allLabels =

document.getElementsByTagName("LABEL");

if (_element) {

for (var i = 0; i < allLabels.length; i++) {

if (allLabels[i].htmlFor == _element.id)

allLabels[i].style.color = "red"; }

} else {

for (var i = 0; i < allLabels.length; i++) {

allLabels[i].style.color = "black";

}

}

}

</script>

<form onsubmit="return submitForm(this);">

<table>

<tr>

<td><label for="login">Your Login</label></td>

<td><input type="text" name="login" id="login" /></td>

</tr>

<tr>

<td><label for="mail">Your Email</label></td>

<td><input type="text" name="mail" id="mail" /></td>

</tr>

<tr>

<td><label for="pass">Your Password</label></td>

<td><input type="password" name="pass" id="pass" /></td>

</tr>

<tr>

<td><label for="confpass">

Confirm Your Password</label></td>

<td><input type="password" name="confpass"

id="confpass" /></td>

</tr>

<tr>

<td colspan="2"><input type="submit"

name="Register" /></td>

</tr>

</table>

</form>

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100