Введение в JavaScript

Введение в JavaScript (часть 1)

Здравствуйте, дорогие читатели.

Итак, сегодня я хотел бы рассказать о событиях в JavaScript.

Событие инициируется при каком-либо действии пользователя. при инициации события выполняется функция, заданная пользователем.

Синтаксис у всех события одинаков:

1 onLoad="alert('Привет')";

Примечание: те события, которые я сейчас опишу лучше всего “вешать” на тег <BODY>. То есть так:

...

<body onLoad="alert('Привет');">

...

Здесь я взял простейшее событие – загрузку страницы (OnLoad) и привязал к нему выдачу диалогового окна c текстом Привет.

Второе событие – OnMouseMove. Оно появляется при перемещении указателя мыши в любую точку экрана. Например, я сделал так:

1 <html>

2 <head>

3 </head>

4 <body onMouseMove="document. getElementById('1').style. color='blue'">

5 <div id="1">Поводите мышкой по экрану и проследите за изменением этого блока!</div>

6 </body>

7 </html>

Третье событие – OnMouseDown. Оно “ловит” клик пользователя по любому месту на страничке.

Например, вот что я придумал:

1 <html>

2 <head>

3 </head>

4 <body onmousedown="alert('Вы совершили клик по странице!');">

5 <div id="1">Нажмите мышкой в любом месте экрана!</div>

6 </body>

7 </html>

Четвёртое и пятое события – onMouseOver и onMouseOut. Первое событие приписывается уже к конкретному тегу, например <DIV> или <SPAN>, но применяться действие может как и к этому объекту, так и к страничке в целом. Второе инициируется при отведении мышки с элемента на странице.

Вот вам код:

1 <html>

2 <head>

3 </head>

4 <body>

5 <div onmouseover="this. innerHTML='Мышка касается блока';" onmouseout="this. innerHTML='Мышка не касается блока';"

6 style="border-color:red; border-style:ridge; border-width:thin; width:100%; height:3%; text-align:center;">Наведите мышку!</div>

7 </body>

8 </html>

Шестое событие – onMouseUp. Оно инициируется когда вы отпустите кнопку мыши. Логичнее было бы описать его рядом с onMouseDown, так как оно запускается сражу же после первого.


Карта сайта


Информационный сайт Webavtocat.ru