Обучение программированию онлайн

Браузерные события

Прокрутить вниз

События в программирования необходимы, чтобы получать обратную связь при совершении действия пользователем, а также для внутренней реакции скриптов. Обучение программированию онлайн не быстрый и порой сложный процесс, если изучать все на сухой теории. Поэтому если вы желаете увлечь ребенка кодингом советуем записаться на пробный урок программирования. Школа GoMother дает всю теорию изучать ребенку выполняя практические задания, что способствует интерес ученика к дальнейшему развитию. А также дает возможность родителям отслеживать результаты обучения. 
Событие – это сигнал от браузера о том, что было совершено какое то действие.

Есть множество различных событий:

DOM-события, которые инициализируются элементами DOM. Например:

  • Событие click совершается при клике,
  • Событие mouseover — при наводе мышкой на элемент,
  • Событие focus — во время фокусировании пользователя на элементе,
  • Событие keydown — при нажатии на клавишу,
  • События для окна браузера. Например, resize — когда изменяется размер окна,
  • Есть загрузки файла/документа: load, readystatechange, DOMContentLoaded…

События соединяют JavaScript-код с документом и посетителем, позволяя создавать динамические интерфейсы.

Назначение обработчиков событий

Для назначения обработчика событию есть несколько вариантов, давайте наглядно их рассмотрим.
Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>.

Например, чтобы прикрепить click-событие к input-кнопке, можно присвоить обработчик onclick, вот так:

<input id=«b1» value=«Нажми меня» onclick=«alert(‘Спасибо!’)» type=«button»/>

 

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick.

В действии:

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

Запись вида onclick=&quot;alert(&quot;Клик&quot;)&quot; не будет работать. Если вам действительно нужно использовать именно двойные кавычки, то это можно сделать, заменив их на &amp;quot;: onclick=&quot;alert(&amp;quot;Клик&amp;quot;)&quot;.

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

Следующий пример по клику запускает функцию countRabbits().

<!DOCTYPE HTML>

<html>

<head>

  <meta charset=«utf-8»>

 

  <script>

    function countRabbits() {

      for(var i = 1; i <= 3; i++) {

        alert(«Кролик номер « + i);

      }

    }

  </script>

</head>

<body>

  <input type=«button» onclick=«countRabbits()» value=«Считать кроликов!»/>

</body>

</html>

 

Как мы знаем, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick или onclick… Но, как правило, атрибуты пишут в нижнем регистре: onclick.

Использование свойства DOM-объекта

Можно назначить обработчик, используя свойство DOM-элемента on<событие>.

Давайте рассмотрим на примере установку обработчика click элементу с id=&quot;myElement&quot;:

<input id=«myElement» type=«button» value=«Нажми меня»/>

<script>

var elem = document.getElementById(‘myElement’);

 

elem.onclick = function() {

    alert(‘Спасибо’);

}

</script>

 

В действии:

В случае если обработчик задан через атрибут, то соответствующее свойство появится у элемента автоматически. Браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство onclick.

Первичным является именно свойство, а атрибут — лишь способ его инициализации.

Эти два примера кода работают одинаково:

  • Только HTML:
      <input type=«button» onclick=«alert(‘Клик!’)» value=«Кнопка»/>
  • HTML + JS:

  <input type=«button» id=«button» value=«Кнопка»/>

  <script>

    document.getElementById(‘button’).onclick = function() {

        alert(‘Клик!’);

    }

  </script>

  • Так как свойство, в итоге, одно, то назначить по обработчику и там и там нельзя.

В примере ниже, назначение через JavaScript перезапишет обработчик из атрибута:

<input type=«button» onclick=«alert(‘До’)» value=«Нажми меня»/>

 

<script>

    var elem = document.getElementsByTagName(‘input’)[0];

 

    elem.onclick = function() { // перезапишет существующий обработчик

        alert(‘После’);

    }

</script>

 

Обработчиком можно назначить уже существующую функцию:

function sayThanks() {

    alert(‘Спасибо!’);

}

 

document.getElementById(‘button’).onclick = sayThanks;

Обучение программированию онлайн

 
Мы постарались доступно объяснить вам что же такое браузерные события, а как вы усвоили тему вы можете проверить пройдя тест. Тест находиться вверху странички и не займет у вас больше 5 минут. Желаем вам удачи!