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

Авторadmin / Опубликовано6 комментариев

На уроке будут рассмотрены типы событий, и в частности событие 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

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



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

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

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

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

    2. Скрипт:

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

    html-код:

    <body>
<form>
<input type="button" name= "myButton" onclick="message()" value="Щелкни!">
</form>
    В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут onclick («по щелчку»), в значении которого стоит вызов функции с названием message(). Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.
    Скрипт при такой обработке события обычно находится в области head документа

  2. Через атрибут тега:
    3. <body>
<form name="myForm">
<input type="button" name="myButton" 
    value="Щелкни!" onclick="javascript: alert('Ура!')">
</form>
    Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
    В качестве атрибута кнопки указывается onclick («по щелчку»), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (javascript:). В нашем случае оператор для вывода модального окна со словом «Ура!»
  3. Через регистрацию функции-обработчика в качестве свойства элемента:

    4. html-код:

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

    Скрипт:

    // document.myForm.myButton.onclick = message; // через дерево элементов
myButton.onclick = message; // так короче, через id
function message() {
	alert('Ура!');
}
    В html-коде здесь присутствует кнопка с атрибутом id, который необходим для обращения к кнопке через скрипт.

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

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

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

Как лучше выводить результаты примеров?
Важно: При вызове document.write после окончания загрузки страницы (при обработке событий onclick, oninput, …), страница перезапишется, поэтому вызывать этот метод не рекомендуется. Для примеров лучше использовать метод alert().

  • document.write добавляет html во время построения DOM
  • alert блокируют выполнение JS, пока пользователь не нажмёт OK
    • Рассмотрим все простые способы вывода отладочной информации:

    1. alert('str'); // показывает окошко
    2. document.write('htmlstr'); // пишет на страницу
    3. document.innerHTML += 'htmlstr'; // добавляет на страницу
    4. console.log('str'); // выводит в консоль браузерах
    Задание Js8_5. Выполните задание по инструкции:

    1. Создайте веб-страницу и расположите в ней тег img с изображением грустного смайлика.
    2. Щелчок на изображении (onclick) вызывает заданный метод (пользовательская функция):
      3. <img id="smileImg" src="smile1.jpg" onclick="sayHello()" />
    3. В скрипте опишите метод (функция sayHello()), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):
      4. function sayHello() { 
	let 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.

    Несколько обработчиков одного и того же события

    В javascript можно назначать НЕСКОЛЬКО обработчиков одного и того же события. Для этого используются методы:

  • addEventListener — добавление обработчика
  • removeEventListener — удаление обработчика

    • Синтаксис addEventListener:

    У метода три аргумента:

    element.addEventListener(event, handler[, phase]);

    где:

  • event — название события, например, click
  • handler — функция-обработчик
  • phase — необязательный аргумент, «фаза», на которой обработчик должен сработать
    • Пример 2: Щелкнув по кнопке вызвать диалоговое окно со словом Ура!. Выполнить задание, используя метод addEventListener.

    ✍ Решение:
     

      html код:

      <input type="button" value="кнопка" id="MyElem">

      скрипт:

      <sсript> 
function message() {
	alert('Ура!');
}
let input = document.getElementById("MyElem"); 
input.addEventListener("click", message);
</script>

    Синтаксис removeEventListener:

    Методу следует передать те же аргументы, что были у addEventListener:

    element.removeEventListener(event, handler[, phase]);

    где:

  • event — название события, например, click
  • handler — функция-обработчик
  • phase — необязательный аргумент, «фаза», на которой обработчик должен сработать
    • Пример 3: В предыдущем задании удалить добавленный обработчик с кнопки, используя метод removeEventListener.

    ✍ Решение:
     

      <sсript> 
function message() {
	alert('Ура!');
}
let input = document.getElementById("MyElem"); 
input.addEventListener("click", message);
input.removeEventListener("click", message);
</script>
    Всплытие и погружение события
    obj.onevent = function(e) {/*...*/}
// где e - объект события
// e.target - элемент, на котором произошло событие
    Назад
    К оглавлению
    Далее

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

    1. Задание 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;
      }

      1. 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;
        }

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

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

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

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

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

      2. Вот так попробуйте, только замените имг на img и боди на body:
        …
        function resizeImgs(){
        var te = document.getElementById(‘img1’);
        te.style.width = document.body.clientWidth;
        };
        …
        <боди onload='resizeImgs()'>
        <имг id='img1' src='logo.png'>

    Обсуждение закрыто.