Материалы представленные на сайте исключительно с целью ознакомления пользователям Интернета и не преследуют коммерческих целей или нарушение авторских прав.
© 2018 - 2024
Для того, чтобы обработать событие, произошедшее на том или ином элементе, элемент-источник и событие должны быть связаны со сценарием обработки события (функцией-обработчиком). Сделать это можно различными способами.
1. Инструкция может помещаться в самом элементе.
<p onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'"> текст</p>Ключевое слово this в этом контексте является ссылкой на элемент-источник (объект p, абзац). Такой подход удобен, когда нужно добавить небольшие инструкции в немногих местах.
2. В элементе помещается вызов функции-обработчика.
<p onmouseover="ChangeStyleOver()" onmouseout="ChangeStyleOut()"> текст</p>Функция-обработчик может принимать аргументы, которые при вызове помещаются в круглые скобки. Специальными случаями является объект-источник ( this ) и событие ( event ), рассмотренные выше. Даже если список аргументов пуст, круглые скобки обязательны.
3. Обработчик события может быть помещен в специальный блок сценария ( script ) с указанием элемента и события.
<script type="text/javascript" for="oButton" event="onclick()"> var sMessage1 = "Flip" var sMessage2 = "Flop" if (oButton.innerText == sMessage1) { oButton.innerText = sMessage2; } else { if (oButton.innerText == sMessage2) { oButton.innerText = sMessage1; } } </script> <button id="oButton">Flip</button>В этом примере сценарий выполняется, когда произошло событие, определенное в атрибуте EVENT, на элементе, id которого задан в атрибуте FOR. Пример работает только в Internet Explorer.
4. Функция-обработчик может быть связана с объектом-источником и событием программно, если по какой-либо причине нежелательно помещать ее вызов в тэг элемента. Рассмотрим этот прием на примере.
Пример: Фотогалерея
Начинающий разработчик хочет создать свою фотогалерею и размещает на странице маленькие изображения, являющиеся гиперссылками на изображения большего размера.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Моя галерея</title></head><body> <div> <div id="gallery"> <a href="images/big/Photo1.jpg"> <img src="images/small/Photo1.jpg" alt="Photo 1" /></a> <a href="images/big/Photo2.jpg"> <img src="images/small/Photo2.jpg" alt="Photo 2" /></a> <a href="images/big/Photo3.jpg"> <img src="images/small/Photo3.jpg" alt="Photo 3" /></a> </div> </div></body></html>Сразу же обнаруживается, что каждая ссылка ведет на новую страницу, а разработчику хотелось бы, чтобы каждая большая фотография появлялась на этой же странице. Кроме того, он планирует время от времени менять фотографии, не меняя ничего больше. Более опытный разработчик предлагает ему решение: поместить на веб-сервер два файла, сценарий JavaScript и каскадную таблицу стилей и добавить в заголовок страницы (элемент head ) единственную строчку
<script type="text/javascript" src="Gallery.js"></script>Каскадная таблица стилей BigImg.css описывает стили двух элементов, контейнера с абсолютным позиционированием на странице и вложенного в него элемента div.
#BigImgContainer{ border:solid 1px #ccc; background:#fff; width:150px; height:150px; position:absolute; top:100px; left:200px; padding:8px; display:none;}#BigImgContainer div{ color:Red;}Весь сценарий реализован в файле Gallery.js.
/*Все свойства и методы объект document доступны только после загрузки страницыпоэтому помещаем код в обработчик window.onload*/window.onload = function() { // находим элемент, в котором должны располагаться // гиперссылки на изображения var oGallery = document.getElementById('gallery'); if (!oGallery) { // элемент не найден. сообщаем инструкции по использованию alert("Для правильной работы в документе должен быть элемент с id='gallery'\nПример:\n\<div id='gallery'>\n\ <a href='MyBigPicture.jpg'><img src='SmallPic.jpg'></a>\n</div>"); return; //выход из функции. Дальнейшие инструкции не выполняются } // if //Галерея найдена. Можно продолжать. // загружаем таблицу стилей var oLink = document.createElement('link'); oLink.rel = 'stylesheet'; oLink.type = 'text/css'; oLink.href = 'BigImg.css'; //и добавляем ее в элемент head document.documentElement.firstChild.appendChild(oLink); // создаем рамку, в которую будет загружаться изображение var oDiv = document.createElement('div'); oDiv.id = 'BigImgContainer'; //создаем вспомогательный элемент, //отображаемый во время загрузки изображения var oLoading = document.createElement('div'); oLoading.innerHTML = 'Идет загрузка...'; // создаем объект изображение var oBigImg = new Image(); //добавляем созданные объекты в дерево документа oDiv.appendChild(oLoading); oDiv.appendChild(oBigImg); document.body.appendChild(oDiv); //находим все гиперссылки в блоке gallery var oAnchors = oGallery.getElementsByTagName('a'); for (var i = 0, n = oAnchors.length; i < n; i++) { //каждый элемент связываем с функцией-обработчиком oAnchors[i].onclick = function() { oDiv.style.width = ''; // вернуть к заданному по умолчанию oDiv.style.height = ''; oDiv.style.display = 'block'; oBigImg.style.display = 'none'; // Загрузка мжет занять время. Показываем сообщение oLoading.style.display = 'block'; //запускаем загрузку изображения oBigImg.src = this.href; // this == oAnchors[i] // Функция должна возвращать false, // чтобы предотвратить переход по ссылке return false; } //oAnchors[i].onclick } //for //функция будет выполняться каждый раз после загрузки нового изображения oBigImg.onload = function() { // мы не знаем размеров изображения, пока оно не загружено oDiv.style.width = this.width + 'px'; // this == oBigImg oDiv.style.height = this.height + 'px'; oLoading.style.display = 'none'; oBigImg.style.display = 'block'; } //oBigImg.onload // скрываем рамку с изображением по щелчку мыши oDiv.onclick = function() { this.style.display = 'none'; // this == oDiv } //oDiv.onclick} //window.onloadСценарий содержит единственную анонимную функцию, которая вызывается автоматически после окончания загрузки HTML-документа. Внутри функции производит проверка наличия элемента, в котором должны располагаться ссылки, после чего создается контейнер для большой фотографии и объект Image, изначально не связанный с файлом изображения. Далее сценарий находит все гиперссылки, расположенные в объекте oGallery ( <div id="gallery"> ), и создает для каждой из них собственный обработчик события onclick. Гиперссылка имеет встроенное действие по щелчку мыши, но событие onclick происходит раньше, что позволяет предотвратить встроенное действие. Внутри обработчика происходит визуализация контейнера oDiv и инициализация загрузки большого изображения. Загрузка всегда происходит асинхронно, и функция-обработчик не дожидается ее окончания и возвращает false, чтобы предотвратить переход по гиперссылке. По окончании загрузки изображения срабатывает обработчик события oBigImg.onload. Только в этот момент сценарий может определить размер полученного изображения и скорректировать под него размеры контейнера. Наконец, обработчик oDiv.onclick позволяет убрать контейнер с изображением с экрана. Сценарий работает в любом браузере, поддерживающем JavaScript.
Дата: 2019-02-02, просмотров: 209.