События в JavaScript

События в JavaScript

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

Прежде всего нас интересуют события мыши, поэтому мы и начнем именно с них. Вот типичные события мыши:

click — событие клика основной (левой) кнопки мыши;

mouseover — событие, которое возникает в момент, когда курсор мыши наводится на искомый элемент страницы (например, кнопка);

mousemove — событие движения мыши;

mousedown — событие нажатия кнопки мыши;

mouseup — событие отжатия кнопки мыши (возникает после события mousedown);

contextmenu — событие клика контекстной (правой) кнопки мыши.

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

Начнем с наиболее частого события, которое нам интересно в первую очередь — событие клика основной кнопки мыши. Давайте создадим обычную кнопку и повесим на нее функцию обработчик. Вот самый простейший вариант, с помощью атрибута onclick:

<button onclick="console.log('Hello')">Click me</button>

Теперь при каждом клике по кнопке в консоль будет выводиться строка Hello:

События в JavaScript

Если нам нужно выполнить более сложный код, тогда будет правильнее описать функцию-обработчик, которую и вызываем в атрибуте onclick. Например, давайте при каждом клике по кнопке добавлять параграф с текстом после кнопки:

<div class="container" id="container">
    <button onclick="creteElem()">Click me</button>
</div>
<script>
    function creteElem(){
        var elem = document.getElementById('container');
        var p = document.createElement('p');
        p.textContent = 'Lorem ipsum dolor sit amet.';
        elem.appendChild(p);
    }
</script>

События в JavaScript

Как видим, достаточно просто. Мы также можем использовать и другой способ назначения обработчика для элемента. Вместо использования атрибута onclick в коде тега, мы можем использовать свойство onclick в коде JS, где опишем функцию. Пример:

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

Теперь при каждом клике по кнопке мы увидим в консоли счетчик вывода строки Hello.

События в JavaScript

На этом мы, пожалуй, остановимся. В следующих статьях мы вернемся к событиям в 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