На уроке будут рассмотрены типы событий, и в частности событие 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 происходит во время одинарного щелчка кнопкой мыши. Обычно для события назначается обработчик, то есть функция, которая сработает, как только событие произошло. Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:
Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»
- Через свойство объекта с использованием пользовательской функции:
Скрипт:
function message() {
alert("Ура!");
} |
function message() {
alert("Ура!");
}
<body>
<form>
<input type="button" name= "myButton" onclick="message()" value="Щелкни!">
</form> |
<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> |
<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> |
<form name="myForm">
<input type="button" value="Щелкни!" id="myButton">
</form>
// document.myForm.myButton.onclick = message; // через дерево элементов
myButton.onclick = message; // так короче, через id
function message() {
alert('Ура!');
} |
// 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
Рассмотрим все
простые способы вывода отладочной информации:
-
alert('str'); // показывает окошко |
alert('str'); // показывает окошко
-
document.write('htmlstr'); // пишет на страницу |
document.write('htmlstr'); // пишет на страницу
-
document.innerHTML += 'htmlstr'; // добавляет на страницу |
document.innerHTML += 'htmlstr'; // добавляет на страницу
-
console.log('str'); // выводит в консоль браузерах |
console.log('str'); // выводит в консоль браузерах
Задание Js8_5. Выполните задание по инструкции:
- Создайте веб-страницу и расположите в ней тег
img с изображением грустного смайлика.
- Щелчок на изображении (
onclick) вызывает заданный метод (пользовательская функция):
<img id="smileImg" src="smile1.jpg" onclick="sayHello()" /> |
<img id="smileImg" src="smile1.jpg" onclick="sayHello()" />
- В скрипте опишите метод (функция
sayHello()), который "спрашивает", как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство src тега img):
function sayHello() {
let userName=prompt("Как вас зовут?");
if(userName){
alert(...);
document.getElementById("smileImg"). ...=...;
}
} |
function sayHello() {
let 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 |
<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"> |
<input type="button" value="кнопка" id="MyElem">
<script>
function message() {
alert('Ура!');
}
let input = document.getElementById("MyElem");
input.addEventListener("click", message);
</script> |
<script>
function message() {
alert('Ура!');
}
let input = document.getElementById("MyElem");
input.addEventListener("click", message);
</script>
Синтаксис removeEventListener:
Методу следует передать те же аргументы, что были у addEventListener:
element.removeEventListener(event, handler[, phase]);
где:
event - название события, например, click
handler - функция-обработчик
phase - необязательный аргумент, «фаза», на которой обработчик должен сработать
Пример: В предыдущем задании удалить добавленный обработчик с кнопки, используя метод removeEventListener.
✍ Решение:
Всплытие и погружение события
obj.onevent = function(e) {/*...*/}
// где e - объект события
// e.target - элемент, на котором произошло событие |
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'>