<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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