Далее на странице...
Какие события происходят в браузере?
Например, «полная загрузка страницы» или «щелчок левой кнопкой мыши» и другие.
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() выполняется при щелчке на изображении левой кнопкой мыши.
