Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

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

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

Объект события в JavaScript - Свойство target

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

Продолжаем работать с событиями в Javascript.

Поговорим о таком понятии как Объект события, о том, как его передать обработчику события. А также о свойстве target, которое указывает на элемент, сгенерировавший событие.

В конце страницы размещена Иллюстрация, которая может помочь разобраться в материале.

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

На странице есть ТРИ полупрозрачных изображения.

Нужно сделать так, чтобы при щелчке на ЛЮБОМ из них левой кнопкой мыши изображение становилось полноценным.

Нужно написать ОДИН обработчик событий для всех изображений.

Объект события в JavaScript - Свойство target

<script type="text/javascript">

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

/* 2. При щелчке на любом из 3-х изображений вызывается функция change, в которую передается Объект события images[i] - объект, представляющий изображение по которому щелкнули мышью */
function back_gr(){
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++){
images[i].onclick = change;
}
}

/* 3. В функции change через свойство target мы обращаемся к Объекту события (к конкретному изображению) и меняем полупрозрачное изображение на полноценное */
function change(eventObj){
var images = eventObj.target; /* сообщаем, какой элемент, т.е. какое изображение сгенерировало событие */
var img_id = images.id; /* получаем id изображения */
images.src = "img/peng_" + img_id + ".gif"/* используем id изображения для изменения атрибута src */
}

</script>

<body>
<img src="img/peng_96_blur.gif" id='96'>
<img src=
"img/peng_64_blur.gif" id='64'>
<img src=
"img/peng_32_blur.gif" id='32'>
</body>

Разберем подробнее код из примера:

    Функция back_gr()

  • var images = document.getElementsByTagName('img');

    - делаем выборку всех изображений - тегов img;

    - при этом метод getElementsByTagName возвращает массив из тегов img, который заносится в переменную images;

    - images является объектом, но работает, в том числе как массив.

  • Далее следует цикл, в котором перебираются все изображения и каждому из них назначается один обработчик события «щелчка» change.

    images[i].onclick = change;

    То есть при щелчке левой кнопкой мыши на любом изображении вызывается одна и та же функция change().

    Это ВАЖНО понять:

    - при щелчке на изображении - оно становится источником события;

    - если быть точнее, то images[i] является Объектом события «щелчка» и представляет то изображение, по которому произведен «щелчок»;

    - далее Объект события «щелчка» передается обработчику события - функции change():

    images[i].onclick = change;

    Функция change()

  • В обработчике события (в функции change) создается параметр eventObj - это условное название: оно удобно тем, что в переводе event - означает событие, а Object - объект.

    То есть присутствие параметра eventObj в функции change()  обозначает, что в обработчик события передан Объект события.

  • Объект события содержит различную информацию о событии.

    - сейчас нас интересует свойство target, которое содержит информацию о том, какой элемент сгенерировал событие (в нашем случае, какое изображение или тег img);

    var images = eventObj.target;

    Теперь через объект images мы можем обращаться к изображению, по которому щелкнули мышью. Мы можем получать или менять значения свойств объекта, то есть значения атрибутов тега img.

    Стоит отметить: images из функций back_gr() и change() никак не связаны друг с другом, так как это локальные переменные.

Частота просмотра уроков
JavaScript
Дизайн сайтов

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

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

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

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

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

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