ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

JavaScript учебник

JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Scope JS Events JS Strings JS String Methods JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Break JS Type Conversion JS Bitwise JS RegExp JS Errors JS Debugging JS Hoisting JS Strict Mode JS this Keyword JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words JS Versions JS Version ES5 JS Version ES6 JS JSON

JS Forms

JS Forms Forms API

JS Objects

Object Definitions Object Properties Object Methods Object Constructors Object Prototypes

JS Functions

Function Definitions Function Parameters Function Invocation Function Call Function Apply Function Closures

JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Animations DOM Events DOM Event Listener DOM Navigation DOM Nodes DOM Collections DOM Node Lists

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications

JS JSON

JSON Intro JSON Syntax JSON vs XML JSON Data Types JSON Objects JSON Arrays JSON Parse JSON Stringify JSON PHP JSON HTML JSON JSONP

JS References

JavaScript Objects HTML DOM Objects


JavaScript События


События HTML являются "вещами" , происходящими с элементами HTML.

Когда JavaScript используется в HTML-страницах, JavaScript может "реагировать" на эти события.


События HTML

Событие HTML может быть что-то браузер делает, или что-то пользователь делает.

Вот несколько примеров событий HTML:

  • Веб-страница HTML завершила загрузку
  • Изменено поле ввода HTML
  • Нажата кнопка HTML

Часто, когда происходят события, вы можете сделать что-то.

JavaScript позволяет выполнять код при обнаружении событий.

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

С одинарными кавычками:

<element event='some JavaScript'>

С двойными кавычками:

<element event="some JavaScript">

В следующем примере в элемент Button добавляется атрибут onclick (с кодом):

Пример

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

В приведенном выше примере код JavaScript изменяет содержимое элемента с идентификатором = "Demo".

В следующем примере код изменяет содержимое собственного элемента (используя this. InnerHtml):

Пример

<button onclick="this.innerHTML = Date()">The time is?</button>

JavaScript код часто несколько строк длиной. Чаще встречаются функции, вызывающие атрибуты событий:

Пример

<button onclick="displayDate()">The time is?</button>


Общие события HTML

Вот список некоторых распространенных событий HTML:

Событие Описание
onchange Изменен HTML-элемент
onclick Пользователь щелкает элемент HTML
onmouseover Пользователь перемещает указатель мыши на элемент HTML
onmouseout Пользователь перемещает мышь от элемента HTML
onkeydown Пользователь нажимает клавишу клавиатуры
onload Браузер завершил загрузку страницы

Список намного больше: Html5css JavaScript ссылки на события HTML DOM.


Что может делать JavaScript?

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

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

Чтобы позволить JavaScript работать с событиями, можно использовать множество различных методов:

  • Атрибуты событий HTML могут выполнять код JavaScript непосредственно
  • Атрибуты событий HTML могут вызывать функции JavaScript
  • Можно назначить собственные функции обработчика событий HTML-элементам
  • Можно запретить отправку или обработку событий
  • И многое другое...

Вы узнаете намного больше о событиях и обработчиках событий в главах HTML DOM.