Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Свойство onmousemove - Перемещение мыши Свойство onclick – Щелчок мышью Свойство target - Объект события

Событие щелчок мыши - Свойство onclick и Атрибут onclick - Обработка событий в JavaScript

Количество просмотров: 551

Что происходит в браузере, какие события?

Например, «полная загрузка страницы» или «щелчок левой кнопкой мыши» и другие.

Javascript-код можно организовать таким образом, что при возникновении этих или других событий в окне браузера будут происходить определенные изменения.

То есть события в Javascript можно подвергнуть обработке (запрограммировать) так, как нам это удобно.

В качестве обработчика события используется какая-либо функция, которая совершает те или иные действия (обрабатывает событие), и которая передается тому или иному объекту или свойству.

Например, чтобы определенная функция (обработчик события) сработала после «полной загрузки страницы», ее необходимо передать объекту window через свойство onload. Объект window знает о том, что страница загружена. Об этом уже был разговор...

Или, чтобы какая-либо функция выполнялась после «щелчка левой кнопкой мыши» на нужном нам объекте (например, изображении), необходимо эту функцию связать с этим объектом посредством свойства onclick, о котором преимущественно и будет идти речь далее...

1.

window.onload = back_gr;

back_gr(){};

Чтобы функция back_gr() (обработчик события) выполнялась после полной загрузки страницы, ее необходимо передать объекту window через свойство onload.

2.

image.onclick = change;

change(){};

Чтобы функция change() (обработчик события) выполнялась при щелчке левой кнопкой мыши на объекте image (например, изображение), необходимо воспользоваться свойством onclick.

Рассмотрим пример:

На странице есть полупрозрачное изображение.

Нужно сделать так, чтобы при щелчке на нем левой кнопкой мыши оно становилось полноценным.

По сути, при возникновении события «щелчок мышью» на изображении - оно должно сменяться другим.

onclick - как свойство объекта - обработка событий

Сначала воспользуемся onclick как свойством объекта, для которого будет вызываться событие. В нашем случае объект - это изображение.

Для того чтобы обратиться к изображению, как к объекту воспользуемся методом getElementById.

<script type="text/javascript">

/* 1. После полной загрузки страницы вызывается функция back_gr */
window.onload = back_gr;

/* 2. При щелчке на изображении мышью вызывается функция change */
function back_gr(){
var image = document.getElementById('img');
image.onclick = change;
}

/* 3. Функция change меняет одно изображение на другое */
function change(){
var image = document.getElementById('img');
image.setAttribute('src','img/peng.gif');
}

</script>

<body>
<img src="img/peng_blur.gif" id='img'>
</body>

Обратите внимание: вернёмся к коду из предыдущего примера.

Посредством метода getElementById к тегу img идет обращение как к объекту image.

Далее при помощи метода setAttribute изменяется значение атрибута src тега img (объекта image):

image.setAttribute('src','img/peng.gif');

Итак, тег img - это объект image, а атрибут src - свойство этого объекта. Следовательно, изменить значение атрибута src можно иначе:

image.src = 'img/peng.gif';

onclick - как атрибут тега - щелчок левой кнопкой мыши

Теперь onclick будет являться атрибутом тега - в нашем случае тега img.

<script type="text/javascript">


function back_gr(){
var image = document.getElementById('img');
image.setAttribute('src',"img/peng.gif");
}

</script>

/* 1. Функция back_gr указана в качестве значения атрибута onClick */
<body>
<img src="img/peng_blur.gif" onClick="back_gr()" id='img'>
</body>

Функция back_gr() выполняется при щелчке на изображении левой кнопкой мыши.

Частота просмотра уроков
JavaScript
Дизайн сайтов
Свойство onmousemove - Перемещение мыши Свойство onclick – Щелчок мышью Свойство target - Объект события

Ваши комментарии:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru