Последние учебники веб-разработки
×

JS Руководство

JS ГЛАВНАЯ JS Введение JS Куда JS Вывод JS Синтаксис JS Заявления JS Комментарии JS переменные JS операторы JS арифметика JS присваивание JS Типы данных JS функции JS Объекты JS Объем JS Мероприятия JS Строки JS Методы струнных JS чисел JS Методы Number JS математический JS Даты JS Форматы даты JS Методы Дата JS Массивы JS Методы массивов JS Booleans JS Сравнения JS условия JS переключатель JS петля For JS В то время как Loop JS Ломать JS Тип преобразования JS RegExp JS ошибки JS отладка JS Подъемно JS Строгий режим JS Гид по стилю JS Лучшие практики JS Ошибки JS Представление JS Зарезервированные слова JS JSON

JS формы

Формы проверки Формы API

JS объект

Определения объектов Свойства объекта Методы объекта Прототипы объектов

JS функции

Определения функций Функциональные параметры Функция Призвание Функция Затворы

JS HTML DOM

DOM вступление DOM методы DOM Документ DOM элементы DOM HTML DOM CSS DOM Анимации DOM Мероприятия DOM EventListener DOM навигация DOM Вершины DOM Nodelist

JS браузер BOM

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

JS Примеры

JS Примеры JS HTML DOM JS HTML вход JS HTML Объекты JS HTML Мероприятия JS браузер JS викторина JS Резюме

JS Рекомендации

JavaScript Объекты HTML DOM Объекты


 

JavaScript Мероприятия


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

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


HTML События

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

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

  • HTML веб-страницы по окончании загрузки
  • Поле ввода HTML был изменен
  • Кнопка HTML была нажата

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

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

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

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

< some-HTML-element some-event = ' some JavaScript ' >

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

< some-HTML-element some-event = " some JavaScript " >

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

пример

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Попробуй сам "

В приведенном выше примере, код JavaScript изменяет содержимое элемента с id="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 Браузер завершил загрузку страницы

Список намного больше: w3ii JavaScript Ссылка на страницу HTML DOM Events .


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

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

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

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

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

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


Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 »