Как лучше всего привлекать рефералов. Набор рефералов. Что делать, чтобы рефералов становилось больше – полезные советы для начинающего реферера

Последнее обновление: 1.11.2015

Встроенные обработчики

В прошлой теме были рассмотрены встроенные обработчики (inline event handler), которые определяются в коде элемента с помощью атрибутов:

Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

Код html смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение

Обработчики событий можно задать только для уже созданных на веб-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий

К элементу для одного события может быть прикреплен только один обработчик

Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

Проблемы, которые возникают при использовании встроенных обработчиков, были призваны решить свойства обработчиков. Подобно тому, как у html-элементов есть атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить свойства обработчиков, которые соответствуют атрибутам:

function handler(e){ alert(e.type); } document.getElementById("rect").onclick = handler;

В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую в качестве обработчика. За счет этого код html отделяется от кода javascript.

Стоит также отметить, что в обработчик события браузер автоматически передает объект Event, хранящий всю информацию о событии. Поэтому также мы можем получить этот объект в функции обработчика в качестве параметра.

Слушатели событий

Несмотря на то, что свойства обработчиков решают ряд проблем, которые связаны с использованием атрибутов, в то же время это также не оптимальный подход. Еще один способ установки обработчиков событий представляет использование слушателей.

Для работы со слушателями событий в JavaScript есть объект EventTarget , который определяет методы addEventListener() (для добавления слушателя) и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели представляют те же функции обработчиков.

Метод addEventListener() принимает два параметра: название события без префикса on и функцию обработчика этого события. Например:

#rect{ width:50px; height:50px; background-color:blue; } var rect = document.getElementById("rect"); rect.addEventListener("click", function (e) { alert(e.type); });

То есть в данном случае опять же обрабатывается событие click. И также можно было бы в качестве второго параметра название функции:

Function handler(e){ alert(e.type); } var rect = document.getElementById("rect"); rect.addEventListener("click", handler);

Удаление слушателя аналогично добавлению:

Rect.removeEventListener("click", handler);

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

Var clicks = 0; function handlerOne(e){ alert(e.type); } function handlerTwo(e){ clicks++; var newNode = document.createElement("p"); newNode.textContent = "произошло нажатие " + clicks; document.body.appendChild(newNode); } var rect = document.getElementById("rect"); // прикрепляем первый обработчик rect.addEventListener("click", handlerOne); // прикрепляем второй обработчик rect.addEventListener("click", handlerTwo);

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

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

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

Описание

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

	a, area, button, input, label, select, textarea	Потеря текущим элементом фокуса. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
	Input, select, textarea	Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
	Практически все	Одинарный щелчок (нажата и отпущена кнопка мыши)
	a, area, button, input, label, select, textarea
	Практически все	Нажата кнопка мыши в пределах текущего элемента
	Практически все	Курсор мыши выведен за пределы текущего элемента
	Практически все	Курсор мыши наведен на текущий элемент
	Практически все	Отпущена кнопка мыши в пределах текущего элемента
		Перемещение окна
		Изменение размеров окна
		Выделение текста в текущем элементе
		Отправка данных формы
		Попытка закрытия окна браузера и выгрузки документа

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

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

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

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

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

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

function resizeImg() { var myImg= document.getElementById ("img1" ) ; myImg.style .width = document.body .clientWidth ; } ...

function resizeImg(){ var myImg=document.getElementById("img1"); myImg.style.width=document.body.clientWidth; } ...

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

переменная myImg ассоциирована с тегом img — картинкой, свойство которой width — ширина — меняется в самой функции.

Вызов функции происходит по загрузке страницы в событии onload тела документа (тело — body — главный элемент, поэтому загрузка страницы — это событие, относящееся к телу).

Задание Js8_4. Разместите в html-коде несколько изображений (тег img). Используя метод измените:
— размер (свойства width и height) всех изображений страницы
— размер границы (свойство border) всех изображений.
Дополните код:

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

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

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

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

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

Скрипт:

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

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

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

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

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

html-код:

Скрипт:

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

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. Выполните задание по инструкции:

Создайте веб-страницу и расположите на ней тег img с изображением грустного смайлика

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

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

Зеленый
… seagreen
… magenta
… purple
… navy
… royalblue

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

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