В этом примере обработчик onAbort
В этом примере обработчик onAbort объекта Image отображает сообщение, когда пользователь прерывает загрузку изображения:
<IMG NAME="aircraft" SRC="f15e.gif"
onAbort="alert('You didn\'t get to see the image!')">
Здесь диалог alert выводится, если пользователь дважды щёлкнет кнопку:
<form>
<INPUT Type="button" Value="Double Click Me!"
onDblClick="alert('You just double clicked me!')">
</form>
Здесь использована функция blockA для вычисления символов, введённых с клавиатуры в текстовый бокс textentry. Если пользователь вводит "a" или "A", функция возвращает false, а текстовый бокс не отображает значение.
<form name="main">
<input name="textentry" type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script> В этой функции свойство which события присваивает ASCII-значение нажатой пользователем клавиши переменной keyChar. Оператор if вычисляет keyChar и возвращает false для специфицированных символов.
Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyPress вызывает функцию blockA для проверки нажатий клавиш. Если нажимаются клавиши "a" или "z", функция прокручивает окно Navigator'а.
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;
Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyUp вызывает функцию Key_Up. Метод alert функции открывает диалоговое окно для отображения значения нажатой клавиши.
function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);
Здесь пользователь может переместить изображение на странице HTML путём перетаскивания его с помощью мыши. Ваш код HTML определяет изображение и позиционирует его в слое с названием container1. В коде JavaScript обработчики событий устанавливают свойства позиционирования container1 при перетаскивании изображения пользователем, создавая анимацию.
С использованием таблиц стилей/style sheets, изображение первоначально определено и позиционировано так:
<HEAD>
<STYLE type="text/css">
#container1 { position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>В вышеприведённом коде HTML атрибут ID элемента P, который содержит изображение, установлен в container1, делая container1 уникальным идентификатором параграфа и изображения. Тэг STYLE создаёт слой для container1 и позиционирует его.
Следующий код JavaScript определяет обработчики onMouseDown, onMouseUp и onMouseMove:
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Эта функция вызывается только в случае захвата MOUSEMOVE*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT> В этом коде метод captureEvents захватывает события MouseUp и MouseDown. Функции DRAG_begindrag и DRAG_enddrag соответственно вызываются для обработки этих событий.
Если пользователь нажимает левую клавишу мыши, функция DRAG_begindrag стартует, захватывая события MouseMove и сообщая функции DRAG_drag о необходимости их обработки. Затем она присваивает значение свойства pageX события MouseDown свойству DRAG_lastX, значение свойства pageY - свойству DRAG_lastY и true - свойству DRAG_dragging.
Функция DRAG_drag вычисляет DRAG_dragging, чтобы гарантировать, что событие MouseMove было захвачено функцией DRAG_begindrag, затем использует метод moveBy для позиционирования объекта и присваивает значения свойствам DRAG_lastX и DRAG_lastY.
Когда пользователь отпускает левую клавишу мыши, функция DRAG_enddrag останавливает захват событий MouseMove. DRAG_enddrag затем гарантирует, что никакие другие функции не вызываются, устанавливая onmousemove в Null и DRAG_dragging - в false.
Здесь функция open_now создаёт окно myWin и захватывает события Move. Обработчик onMove вызывает другую функцию, которая выводит сообщение, когда пользователь перемещает myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWindow","width=400,height=400,menubar=no, location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please move this window</h1></body>"+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.MOVE);
myWin.onmove=fun2;
}function fun2(){
alert("Hey you moved me!");
this.focus(); //'this' указывает на текущий объект
}
Следующий пример выводит объект Text со значением по умолчанию "CA" и кнопкой reset. Если пользователь вводит аббревиатуру названия штата в объект Text и щёлкает на кнопке reset, восстанавливается оригинальное значение "CA". Обработчик onReset формы выводит сообщение, указывающее, что восстановлены значения по умолчанию.
<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>
Здесь функция open_now создаёт окно myWin и захватывает события Resize. Обработчик onResize вызывает функцию alert_me, которая выводит сообщение, если пользователь изменяет размер окна myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
} function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}
Здесь onSelect используется в Text- объекте valueField для вызова функции selectState.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
Здесь onSubmit вызывает функцию validate для вычисления отправляемых данных. Если данные верны, форма отправляется; иначе форма не отправляется.
<FORM onSubmit="return validate(this)">
...
</FORM> См. также примеры для Form.
Здесь onUnload вызывает функцию cleanUp для выполнения некоторого процессинга при окончании работы, когда пользователь выходит из страницы (закрывает её):
<BODY onUnload="cleanUp()">
