В этой статье мы продолжим знакомиться с событиями в JavaScript. Именно благодаря событиям наше приложение становится интерактивным и может взаимодействовать с пользователем. Из статьи вы узнаете, что такое объект события, а также познакомитесь с оператором this, который предоставляет доступ к элементу.
Для того, чтобы полноценно работать с событиями, нам не обойтись без таких понятий, как объект события и доступ к самому объекту. Начнем с последнего. Доступ к объекту можно получить через ключевое слово this. Давайте сразу же посмотрим пример:
1.<button id="btn">Click me</button>2.<script>3.var btn = document.getElementById('btn');4.btn.onclick = function(){5.console.log(this);6.};7.</script>А в консоли при клике мы увидим сам элемент:
Что это нам дает? Думаю, вы уже могли догадаться. Коль у нас есть доступ непосредственно к объекту, значит мы можем что-то сделать с этим объектом. Или с его окружением. Например, выведем текст на кнопке при клике:
1.var btn = document.getElementById('btn');2.btn.onclick = function(){3.console.log(this.textContent);4.// или так5.console.log(this.innerHTML);6.};А при желании мы можем и без проблем изменить текст на кнопке:
1.var btn = document.getElementById('btn');2.btn.onclick = function(){3.this.textContent = 'Кнопка нажата';4.};После клика на кнопке новый текст:
Также без проблем мы можем изменить оформление кнопки или просто назначить для нее класс, использовав оформление таблицы стилей:
1.var btn = document.getElementById('btn');2.btn.onclick = function(){3.this.textContent = 'Кнопка нажата';4.this.className = 'btn btn-success';5.};
Ключевое слово this вы не раз будете использовать на практике, поэтому важно понять, как с ним работать. Впрочем, в уроках и курсе по JavaScript этому уделено достаточно внимания.
Теперь давайте уделим немного внимания объекту события. Когда происходит событие, создается объект события, в который записывается различная информация (тип события, координаты курсора, элемент, на котором произошло событие и т.д.), которая может быть нам полезна.
Для того, чтобы получить объект события, достаточно передать его параметром в функцию-обработчик:
1.var btn = document.getElementById('btn');2.btn.onclick = function(e){3.console.log(e);4.};
В консоли мы сразу же увидели тип события и координаты курсора мыши (относительно окна браузера) в момент возникновения события. Соответственно, эту же информацию мы можем получить, обратившись к каждому из свойств по отдельности:
1.btn.onclick = function(e){2.console.log('Координата x:' + e.clientX);3.console.log('Координата y:' + e.clientY);4.console.log('Тип события:' + e.type);5.};
Я кликнул дважды по кнопке, первый раз ближе к началу кнопки, второй раз — ближе к концу кнопки. Обратите внимание, как при этом изменилось свойство clientX — координата по оси X (по горизонтали).
А вот таким образом мы можем получить сам объект (некий аналог this получается):
1.btn.onclick = function(e){2.console.log(e.currentTarget);3.};На этом мы, пожалуй, остановимся. В следующих статьях мы вернемся к событиям в JavaScript и работе с ними.
Источник: https://webformyself.com/sobytiya-v-javascript-chast-2/