Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...

Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...

Особенности труда и отдыха в условиях низких температур: К работам при низких температурах на открытом воздухе и в не отапливаемых помещениях допускаются лица не моложе 18 лет, прошедшие...

Интересное:

Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...

Аура как энергетическое поле: многослойную ауру человека можно представить себе подобным...

Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Назначение обработчиков событий

2019-08-07

261

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 2Следующая ⇒

Послание по JS № 12

Введение в события на JS

Клиентские программы на языке JavaScript основаны на модели программирования, когда выполнение программы управляется событиями. При таком стиле программирования веб-броузер генерирует событие, когда с документом или некоторым его элементом что-то происходит.

Например, веб-броузер генерирует событие, когда завершает загрузку документа, когда пользователь наводит указатель мыши на гиперссылку или нажимает клавишу на клавиатуре. Если JavaScript-приложение интересует определенный тип события для определенного элемента документа, оно может зарегистрировать одну или более функций, которая будет вызываться при возникновении этого события. Имейте в виду, что это не является уникальной особенностью веб-программирования: все приложения с графическим интерфейсом пользователя действуют именно таким образом – они постоянно ожидают, пока что-то произойдет (т. е. ждут появления событий), и откликаются на происходящее.

Если говорить проще, то событие – это сигнал от браузера о том, что что-то произошло.

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

События мыши:

· click – происходит, когда кликнули на элемент левой кнопкой мыши

· contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши

· mouseover – возникает, когда на элемент наводится мышь

· mousedown и mouseup – когда кнопку мыши нажали или отжали

· mousemove – при движении мыши

События на элементах управления:

· submit – посетитель отправил форму <form>

· focus – посетитель фокусируется на элементе, например нажимает на <input>

Клавиатурные события:

· keydown – когда посетитель нажимает клавишу

· keyup – когда посетитель отпускает клавишу

События документа:

· DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

События CSS:

· transitionend – когда CSS-анимация завершена.

Также есть и много других событий.

Назначение обработчиков событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря им JavaScript-код может реагировать на действия посетителя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная от самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Например, чтобы прикрепить click-событие к input кнопке, можно присвоить обработчик onclick, вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick.

Внимание!

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных.

Обычно в разметке пишутся только очень простые обработчики. Если нужно сделать что-то сложное, то имеет смысл описать это в функции, и в обработчике вызвать уже её.

Следующий пример по клику запускает функцию countRabbits().

<!DOCTYPE HTML>

<html>

<head>

function countRabbits() {

for(var i=1; i<=3; i++) {

alert("Кролик номер " + i);

}

</script>

</head>

<body>

</body>

</html>

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick или onCLICK… Но, как правило, атрибуты пишут в нижнем регистре: onclick.

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>.

Пример установки обработчика click:

elem.onclick = function() {

alert('Спасибо');

};

</script>

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство onclick.

Этот способ, по сути, аналогичен предыдущему.

Обработчик хранится именно в DOM-свойстве, а атрибут – лишь один из способов его инициализации.

Не используем setAttribute

Не используйте setAttribute для установки событий.

Такой вызов работать не будет:

// при нажатии на body будут ошибки

// потому что при назначении в атрибут функция будет преобразована в строку

document.body.setAttribute('onclick', function() { alert(1) });

Итого по назначению событий

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick="...".

2. Свойство: elem.onclick = function.

3. Специальный метод: elem.addEventListener(событие, handler[, phase]), удаление через removeEventListener.

Объект события

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

elem.onclick = function(event) {

alert(event.type + " на " + event.currentTarget); // вывести тип события и элемент

alert(event.clientX + ":" + event.clientY); // вывести координаты клика

}

</script>

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

<button id="btn">Кнопка</button>

let btn = document.getElementById('btn')

btn.onclick = function (event) {

console.log(event);

console.dir(event);

}

</script>

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Работает это так:

elem.onclick = function() {

// window.event - объект события

alert(window.event.clientX);

};

Кроссбраузерное решение

Универсальное решение для получения объекта события:

element.onclick = function(event) {

event = event || window.event; // (*)

};

Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.

Итого по объекту события

Объект события содержит ценную информацию о деталях события.

Он передается первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.

Отмена действия браузера

Есть два способа отменить действие браузера:

1. Для отмены действия браузера существует стандартный метод объекта события event.preventDefault().

2. Если же обработчик назначен через onсобытие (не через addEventListener), то можно просто вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдет:

<a href="/" onclick="return false">Нажми здесь</a>

<a href="/" onclick="event.preventDefault()">здесь</a>

Другие действия браузера

Действий браузера по умолчанию достаточно много.

Вот некоторые примеры событий, которые вызывают действие браузера:

· mousedown – нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.

· click на <input type="checkbox"> – ставит или убирает галочку.

· submit – при нажатии на <input type="submit"> в форме данные отправляются на сервер.

· wheel – движение колёсика мыши инициирует прокрутку.

· keydown – при нажатии клавиши в поле ввода появляется символ.

· contextmenu – при правом клике показывается контекстное меню браузера.

Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.

Особенности IE8-

В IE8- для отмены действия по умолчанию нужно назначить свойство event.returnValue = false.

Кроссбраузерный код для отмены действия по умолчанию:

element.onclick = function(event) {

event = event || window.event;

event.preventDefault? event.preventDefault(): (event.returnValue=false);

Послание по JS № 12

Введение в события на JS

Если говорить проще, то событие – это сигнал от браузера о том, что что-то произошло.

События мыши:

· click – происходит, когда кликнули на элемент левой кнопкой мыши

· contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши

· mouseover – возникает, когда на элемент наводится мышь

· mousedown и mouseup – когда кнопку мыши нажали или отжали

· mousemove – при движении мыши

События на элементах управления:

· submit – посетитель отправил форму <form>

· focus – посетитель фокусируется на элементе, например нажимает на <input>

Клавиатурные события:

· keydown – когда посетитель нажимает клавишу

· keyup – когда посетитель отпускает клавишу

События документа:

· DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

События CSS:

· transitionend – когда CSS-анимация завершена.

Также есть и много других событий.

Назначение обработчиков событий

Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло.

Именно благодаря им JavaScript-код может реагировать на действия посетителя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная от самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Например, чтобы прикрепить click-событие к input кнопке, можно присвоить обработчик onclick, вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick.

Внимание!

Следующий пример по клику запускает функцию countRabbits().

<!DOCTYPE HTML>

<html>

<head>

function countRabbits() {

for(var i=1; i<=3; i++) {

alert("Кролик номер " + i);

}

</script>

</head>

<body>

</body>

</html>

12 Следующая ⇒

Поделиться с друзьями:

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...

Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...