Содержание:
Типы событий JavaScript
Рассмотрим наиболее стандартные и часто используемые javaScript события:
Обработчик |
Поддерживающие HTML- элементы и объекты |
Описание |
---|---|---|
onBlur |
a, area, button, input, |
Потеря текущим элементом фокуса. Возникает при |
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
для изменения ширины и высоты элемента.
✍ Решение:
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
— главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).— размер (свойства
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> |
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('Ура!'); } |
id
, который необходим для обращения к кнопке через скрипт.
В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега body
), находится обращение к кнопке (document.myForm.myButton
), для которой назначается обработчик события onclick
со значением ссылки на функцию. Обращение к кнопке может быть организовано через атрибут id
(document.getElementById('myButton').onclick = message;
)
Скобки после названия функции message
не ставятся. В данном случае это именно ссылка на функцию, иначе, при использовании скобок, функция была бы вызвана, а не назначена в качестве обработчика событий.
Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.
document.write
после окончания загрузки страницы (при обработке событий onclick, oninput, …), страница перезапишется, поэтому вызывать этот метод не рекомендуется. Для примеров лучше использовать метод alert()
.
document.write
добавляет html во время построения DOMalert
блокируют выполнение JS, пока пользователь не нажмёт OK-
alert('str'); // показывает окошко
-
document.write('htmlstr'); // пишет на страницу
-
document.innerHTML += 'htmlstr'; // добавляет на страницу
-
console.log('str'); // выводит в консоль браузерах
- Создайте веб-страницу и расположите в ней тег
img
с изображением грустного смайлика. - Щелчок на изображении (
onclick
) вызывает заданный метод (пользовательская функция): - В скрипте опишите метод (функция
sayHello()
), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойствоsrc
тегаimg
):
<img id="smileImg" src="smile1.jpg" onclick="sayHello()" /> |
function sayHello() { var userName=prompt("Как вас зовут?"); if(userName){ alert(...); document.getElementById("smileImg"). ...=...; } } |
События onMouseOver и onMouseOut
Событие наступает при наведении (onMouseOver
) на объект и при выведении (onMouseOut
) за пределы объекта курсора мыши.
Назначение обработчика событий осуществляется точно таким же образом, как и в случае с событием onclick.
Поэтому выполним задание:
Дополните код:
<br> <a href="/" onmouseover="document.bgColor='green' ">Зеленый</a> <br> … seagreen <br> … magenta <br> … purple <br> … navy <br> … royalblue |
— Добавьте в код тег img
с изображением.
— Введите обработчики событий onmouseover
(по наведению) и onmouseout
(при отведении). Сделайте это в виде функций.
— Присоедините к обработчику событий onmouseover
процедуру загрузки в тег img
другого изображения.
— Присоедините к обработчику событий onmouseout
процедуру загрузки другого изображения в тег img
.
Несколько обработчиков одного и того же события
Синтаксис addEventListener:
У метода три аргумента:
element.addEventListener(event, handler[, phase]);где:
event — название события, например, click handler — функция-обработчик phase — необязательный аргумент, «фаза», на которой обработчик должен сработать
✍ Решение:
-
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 — необязательный аргумент, «фаза», на которой обработчик должен сработать
✍ Решение:
<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 - элемент, на котором произошло событие |
Аделина
Задание 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'>
боди>