Далее на странице...
Продолжаем работать с событиями в 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>
Разберем подробнее код из примера:
-
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() никак не связаны друг с другом, так как это локальные переменные.
Функция back_gr()
Дата: 2020-04-03
Очень понятно и доходчиво объясняется материал. Спасибо!!