События в JavaScript. Часть 2

События в JavaScript

От автора: приветствую вас, друзья. В этой статье мы продолжим знакомиться с событиями в JavaScript. Именно благодаря событиям наше приложение становится интерактивным и может взаимодействовать с пользователем. Из статьи вы узнаете, что такое объект события, а также познакомитесь с оператором this, который предоставляет доступ к элементу.

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

А в консоли при клике мы увидим сам элемент:

События в JavaScript

Что это нам дает? Думаю, вы уже могли догадаться. Коль у нас есть доступ непосредственно к объекту, значит мы можем что-то сделать с этим объектом. Или с его окружением. Например, выведем текст на кнопке при клике:

А при желании мы можем и без проблем изменить текст на кнопке:

После клика на кнопке новый текст:

События в JavaScript

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

События в JavaScript

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

Теперь давайте уделим немного внимания объекту события. Когда происходит событие, создается объект события, в который записывается различная информация (тип события, координаты курсора, элемент, на котором произошло событие и т.д.), которая может быть нам полезна.

Для того, чтобы получить объект события, достаточно передать его параметром в функцию-обработчик:

События в JavaScript

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

События в JavaScript

Я кликнул дважды по кнопке, первый раз ближе к началу кнопки, второй раз — ближе к концу кнопки. Обратите внимание, как при этом изменилось свойство clientX — координата по оси X (по горизонтали).

А вот таким образом мы можем получить сам объект (некий аналог this получается):

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

Метки:

Похожие статьи:

Комментарии Вконтакте: