JavaScript урок 8. Часть 2. Объектная модель документа (javaScript DOM) и события

На уроке будут рассмотрены типы событий, и в частности событие onclick javascript

Типы событий JavaScript

Рассмотрим наиболее стандартные и часто используемые javaScript события:

Обработчик
события

Поддерживающие HTML- элементы и объекты

Описание

onBlur

a, area, button, input,
label, select, textarea

Потеря текущим элементом фокуса. Возникает при
щелчке мышью вне элемента либо нажатии клавиши табуляции

onChange

Input, select, textarea

Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur

onClick

Практически все

Одинарный щелчок (нажата и отпущена кнопка мыши)

onFocus

a, area, button, input, label, select, textarea

Получение элементом фокуса

onLoad

body, frameset

Закончена загрузка документа

onMouseDown

Практически все

Нажата кнопка мыши в пределах текущего элемента

onMouseOut

Практически
все

Курсор мыши выведен за пределы
текущего элемента

onMouseOver

Практически все

Курсор мыши наведен на текущий элемент

onMouseUp

Практически все

Отпущена кнопка мыши в пределах текущего элемента

onMove

window

Перемещение окна

onResize

window

Изменение размеров окна

onSelect

textarea, input

Выделение текста в текущем элементе

onSubmit

form

Отправка данных формы

onUnload

body, frameset

Попытка закрытия окна браузера и выгрузки документа

Событие onLoad. Свойства высоты и ширины объекта в javaScript

Свойства высота и ширина объекта в javaScript
Для выполнения следующего примера нам понадобится новое понятие — событие.

В нашем случае событие — это реакция программы на действие пользователя (щелчок мышью по кнопке, уменьшение мышкой окна браузера, ввод текста с клавиатуры и т.д.). С помощью программы у нас есть возможность отреагировать на любые действия пользователя.

Рассмотрим одно из самых распространенных событий — onload — которое происходит при загрузке документа (когда пользователь своими действиями вызвал загрузку веб-страницы).

Рассмотрим пример использования события javascript onload для изменения ширины и высоты элемента.

 

Пример: Добавить на страницу изображение и при помощи javascript при наступлении события загрузки страницы сделать ширину изображения соответствующей ширине окна браузера

function resizeImg(){
	var myImg=document.getElementById("img1");
	myImg.style.width=document.body.clientWidth;
}
...
<body onload="resizeImg()" >
<img src="1.jpg" id="img1">

В примере основные действия происходят в функции resizeImg():

  • переменная myImg ассоциирована с тегом img — картинкой, свойство которой width — ширина — меняется в самой функции.
  • Вызов функции происходит по загрузке страницы в событии onload тела документа (тело — body — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).
  • Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод getElementsByTagName() измените:
    — размер (свойства width и height) всех изображений страницы
    — размер границы (свойство border) всех изображений.
    Дополните код:

    var allImg=document...; // получаем массив изображений
    for (var i=0; i < allImg.length; i++){
        allImg[i].....; // меняем свойство width
        ...; // меняем свойство height
        ...; // меняем border
    }

    Событие onclick javaScript и три способа обработки событий

    Событие onClick происходит во время одинарного щелчка кнопкой мыши. Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:

    Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

    1. Через свойство объекта с использованием пользовательской функции:
    2. Скрипт:

      function message() {
      		alert("Ура!");
      	}

      html-код:

      <body>
      <form>
      <input type="button" name= "myButton" onclick="message()" value="Щелкни!">
      </form>

      В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут onclick («по щелчку»), в значении которого стоит вызов функции с названием message(). Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.

      Скрипт при такой обработке события обычно находится в области head документа

    3. Через атрибут тега:
    4. <body>
      <form name="myForm">
      <input type="button" name="myButton" value="Щелкни!" 
      	onclick="javascript: alert('Ура!')">
      </form>

      Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
      В качестве атрибута кнопки указывается onclick («по щелчку»), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (javascript:). В нашем случае оператор для вывода модального окна со словом «Ура!»

    5. Через регистрацию функции-обработчика в качестве свойства элемента:
    6. html-код:

      <form name="myForm">
      <input type="button" value="Щелкни!" id="myButton">
      </form>

      Скрипт:

      document.myForm.myButton.onclick = message; 
      function message() {
      	alert('Ура!');
      }

      В html-коде здесь присутствует кнопка с атрибутом id, который необходим для обращения к кнопке через скрипт.

      В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега body), находится обращение к кнопке (document.myForm.myButton), для которой назначается обработчик события onclick со значением ссылки на функцию. Обращение к кнопке может быть организовано через атрибут id (document.getElementById('myButton').onclick = message;)

      Скобки после названия функции message не ставятся. В данном случае это именно ссылка на функцию, иначе, при использовании скобок, функция была бы вызвана, а не назначена в качестве обработчика событий.

      Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

    Задание Js8_5. Выполните задание по инструкции:

    1. Создайте веб-страницу и расположите на ней тег img с изображением грустного смайлика
    2. Щелчок на изображении (onclick) вызывает заданный метод (пользовательская функция):
    3. <img id="smileImg" src="smile1.jpg" onclick="sayHello()" />
    4. В скрипте опишите метод (функция sayHello()), который спрашивает, как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):
    5. function sayHello() { 
      	var userName=prompt("Как вас зовут?");
      	if(userName){
      		alert(...);
      		document.getElementById("smileImg"). ...=...;
      	}
      }

    javascript onclick  =>> javascript onclick

    События onMouseOver и onMouseOut

    Событие наступает при наведении (onMouseOver) на объект и при выведении (onMouseOut) за пределы объекта курсора мыши.

    Назначение обработчика событий осуществляется точно таким же образом, как и в случае с событием onclick.

    Поэтому выполним задание:

    Задание Js8_6. По наведению курсора мыши на гиперссылки закрашивать задний фон страницы в разные цвета. Дополните код:

    <br> <a href="/"  onmouseover="document.bgColor='green' ">Зеленый</a>
    <br> … seagreen
    <br> … magenta
    <br> … purple
    <br> … navy
    <br> … royalblue

    Задание Js8_7. Создание rollover-изображения

    — Добавьте в код тег img с изображением.
    — Введите обработчики событий onmouseover (по наведению) и onmouseout (при отведении). Сделайте это в виде функций.
    — Присоедините к обработчику событий onmouseover процедуру загрузки в тег img другого изображения.
    — Присоедините к обработчику событий onmouseout процедуру загрузки другого изображения в тег img.

    Поделитесь уроком с коллегами и друзьями:
    6 комментариев

      Аделина

      Задание Js8_4. Что я делаю не так? Вот мой код(не работает)

      var allImg = document.getElementsByTagName(«img»);
      for (var a in allImg )
      {
      allImg[0].style.width = 50px;
      allImg[0].style.height = 50px;
      allImg[0].style.border = 10px;
      }

        admin

        1. Кавычки лучше другие ставить (не русские) или вообще апостроф, как у меня.
        2. px не нужно писать в данном случае
        3. Скрипт должен находиться перед закрытием тега body )

        var allImg = document.getElementsByTagName(‘img’);
        for (var a in allImg )
        {
        allImg[0].style.width = 50;
        allImg[0].style.height = 50;
        allImg[0].style.border = 100;
        }

      Юлия

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

      function resizeImgs(){
      var te = document.getElementById(«img1»);
      te.style.width = document.body.clientWidth;
      };

      Юлия

      Добрый вечер,
      пытаюсь воспроизвести пример из данной главы. Безуспешно. Не растягивает картинку. Можете подсказать, что не так..

      function resizeImgs(){
      var te = document.getElementById(«img1»);
      te.style.width = document.body.clientWidth;
      };

        admin

        Здравствуйте! Попробуйте не использовать такие кавычки в коде: «img1», попробуйте одинарные ‘img1’.

        admin

        Вот так попробуйте, только замените имг на img и боди на body:

        function resizeImgs(){
        var te = document.getElementById(‘img1’);
        te.style.width = document.body.clientWidth;
        };

        < боди onload='resizeImgs()'>
        < имг id='img1' src='logo.png'>

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

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить