<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Обработчик и объект событий в JS

Обработчик и объект событий в JS

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

Разумеется, что все эти действия нужно прописать в коде, чем мы сейчас и займемся. Для общего понимания в JS есть 4 группы событий:

  • события мыши
  • события отправки формы
  • события клавиатуры
  • события документа

События - это все, чем занимается пользователь на странице.

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

Программист вешает обработчик события на элемент, который сразу отреагирует, если в браузере произойдет событие. В этой статье достаточно подробно описаны все три основных способа, как повесить обработчик события на элемент. Из той статьи так же понятно, что назначать и удалять события, лучше всего через методы: addEventListener и removeEventListener.

Запрограммируем, чтобы при клике по кнопке, появилось модальное окно. Сначала прокрутим в голове алгоритм действий:

  1. получаем элемент со страницы
  2. поручим обработчику событий, отслеживать событие клика по кнопке
  3. в случае клика запустить функцию с алертом
<button>Отправить</button>

let btn = document.querySelector('button'); // #1
btn.addEventListener('click', function(){ // #2
alert('Вы кликнули по кнопке'); // #3
});

Несколько событий в JS

На один элемент можно повесить несколько обработчиков событий.

bет.addEventListener('click', function(event){
    alert('Как дела?');
});
bет.addEventListener('mouseover', function(event){
    alert('Это круто!');
});

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

Однако, нам хотелось бы узнать, какое именно событие произошло и какие данные о себе скрывает объект (например её координаты). Для этого есть специальный объект event, через который можно вытащить свойства и методы у объекта. Event передается в callback функцию, как аргумент, а его свойства могут вызываться уже внутри функции.

btn.addEventListener('click', function(event){
console.log(event);
});

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

Обработчик и объект событий в JS.

Но на практике, вряд ли вам потребуется выводить все имеющиеся данные у объекта. Поэтому, чтобы узнать какое было событие, мы добавили к слову event, метод type. В консоли вывелось название события click, которое произошло на нашем элементе.

btn.addEventListener('click', function(event){
console.log(event.type);
});

Таким образом, мы можем добавлять после точки название свойства или метода и извлекать нужные нам данные. Наиболее часто используемое у event объекта свойство - это target.

Конструкция event.target

На этом уроке, мы по клику добавляли класс кнопке, оперируя данными, через event.target. Имея доступ к стилям, мы можем изменить фон. Для удобства поместим event.target в переменную.

let btn = document.querySelector('btn');
btn.addEventListener('click', function(event){
    let bg = event.target;
    bg.style.background = 'red';
});

Узнаем координаты мыши при клике по блоку.

<div>Узнать координаты</div>
<script>
let div = document.querySelector('div');
div.addEventListener('click', function(event){
    console.log("X: " + event.clientX + " " + "Y: " + event.clientY);
});
</script>
// в консоли
X: 34 Y: 40

Отмена события в JS

Иногда полезно иметь возможность отменять событие. Кликнув по ссылке, мы ничего не увидим в консоли, поскольку браузер уведет нас по ссылке. Чтобы этого не произошло, нужно отменить стандартное поведение браузера - прописать в теле callback функции - метод preventDefault().

<a href="https://www.google.com/">Ссылка</a>
<script>
let link = document.querySelector('a');
link.addEventListener('click', function(event){
    event.preventDefault();
    console.log(event);
});
</script>

Теперь при клике по ссылке, мы никуда не переходим.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.