Типы событий, их обработка и событие onclick javascript

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

Содержание:

Типы событий JavaScript
Событие onLoad. Свойства высоты и ширины объекта в javaScript
Событие onclick javaScript и три способа обработки событий
События onMouseOver и onMouseOut
Несколько обработчиков одного и того же события

Типы событий 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

Для выполнения следующего примера нам понадобится новое понятие — событие.

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

Рассмотрим одно из самых распространенных событий — 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 происходит во время одинарного щелчка кнопкой мыши. Обычно для события назначается обработчик, то есть функция, которая сработает, как только событие произошло. Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:

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

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

Скрипт:

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

html-код:

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

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

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

Через атрибут тега:

<body>
<form name="myForm">
<input type="button" name="myButton" 
    value="Щелкни!" onclick="javascript: alert('Ура!')">
</form>

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

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

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.

Как лучше выводить результаты примеров?

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

document.write добавляет html во время построения DOM

alert блокируют выполнение JS, пока пользователь не нажмёт OK

Рассмотрим все простые способы вывода отладочной информации:

alert('str'); // показывает окошко

document.write('htmlstr'); // пишет на страницу

document.innerHTML += 'htmlstr'; // добавляет на страницу

console.log('str'); // выводит в консоль браузерах

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

Создайте веб-страницу и расположите в ней тег img с изображением грустного смайлика.
Щелчок на изображении (onclick) вызывает заданный метод (пользовательская функция):

<img id="smileImg" src="smile1.jpg" onclick="sayHello()" />

В скрипте опишите метод (функция sayHello()), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):

function sayHello() { 
	var userName=prompt("Как вас зовут?");
	if(userName){
		alert(...);
		document.getElementById("smileImg"). ...=...;
	}
}

=>>

События 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 — необязательный аргумент, «фаза», на которой обработчик должен сработать

Пример: Щелкнув по кнопке вызвать диалоговое окно со словом Ура!. Выполнить задание, используя метод addEventListener.

✍ Решение:

html код:

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

скрипт:

<script type="text/javaScript"> 
function message() {
	alert('Ура!');
}
var input = document.getElementById("MyElem"); 
input.addEventListener("click", message);
</script>

Синтаксис removeEventListener:

Методу следует передать те же аргументы, что были у addEventListener:
element.removeEventListener(event, handler[, phase]);
где:

event — название события, например, click

handler — функция-обработчик

phase — необязательный аргумент, «фаза», на которой обработчик должен сработать

Пример: В предыдущем задании удалить добавленный обработчик с кнопки, используя метод removeEventListener.

✍ Решение:

<script type="text/javaScript"> 
function message() {
	alert('Ура!');
}
var input = document.getElementById("MyElem"); 
input.addEventListener("click", message);
input.removeEventListener("click", message);
</script>

Всплытие и погружение события

obj.onevent = function(e) {/*...*/}
// где e - объект события
// e.target - элемент, на котором произошло событие

К оглавлению

Аделина

13 августа, 2017 в 01:32

Задание 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

13 августа, 2017 в 16:23

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

Юлия

9 сентября, 2017 в 00:02

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

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

9 сентября, 2017 в 00:06

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

12 сентября, 2017 в 17:52

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

12 сентября, 2017 в 18:12

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

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

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

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

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

События onMouseOver и onMouseOut

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

6 комментариев

Аделина

admin

Юлия

Юлия

admin

admin

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