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

События в JavaScript

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

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

<button id="btn">Click me</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        console.log(this);
    };
</script>

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

События в JavaScript

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

var btn = document.getElementById('btn');
btn.onclick = function(){
    console.log(this.textContent);
    // или так
    console.log(this.innerHTML);
}; 

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

var btn = document.getElementById('btn');
btn.onclick = function(){
    this.textContent = 'Кнопка нажата';
};

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

События в JavaScript

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

var btn = document.getElementById('btn');
btn.onclick = function(){
    this.textContent = 'Кнопка нажата';
    this.className = 'btn btn-success';
};

События в JavaScript

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

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

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

var btn = document.getElementById('btn');
btn.onclick = function(e){
    console.log(e);
};

События в JavaScript

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

btn.onclick = function(e){
    console.log('Координата x:' + e.clientX);
    console.log('Координата y:' + e.clientY);
    console.log('Тип события:' + e.type);
};

События в JavaScript

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

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

btn.onclick = function(e){
    console.log(e.currentTarget);
};

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

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree