Автор оригинала: FreeCodeCamp Community Member.
В первые дни Интернета веб-страницы были действительно статичными – были только текст и изображения. Конечно, иногда это изображение было анимированным GIF, но это все еще было просто изображением.
С появлением JavaScript становится все возможнее создавать интерактивные страницы, которые ответили бы на действия, такие как нажатие на кнопку или анимацию прокрутки.
Существует несколько событий DOM (модель документов объекта), которые вы можете прослушать в JavaScript, но OnClick и oepload являются одними из наиболее распространенных.
Enclick Event.
OnClick Событие в JavaScript позволяет выполнять функцию, когда нажат элемент.
Пример
В простом примере выше, когда пользователь нажимает на кнопку, они увидят предупреждение в их браузере, показывающую Кнопка нажала! Отказ
Добавление onclick динамически
Пример выше работает, но обычно считается плохой практикой. Вместо этого лучше отделить содержание страницы (HTML) из логики (JS).
Сделать это, OnClick Событие может быть программно добавлено в любой элемент, используя следующий код в следующем примере:
click on this element.
Примечание
Важно отметить, что используя OnClick Мы можем добавить только одну функцию слушателя. Если вы хотите добавить больше, просто используйте addeventListener () , который является предпочтительным способом для добавления событий.
В приведенном выше примере, когда пользователь нажимает на Пункт Элемент в HTML они увидят предупреждение, показывающую Enclick событие срабатывает Отказ
Предотвращение действий по умолчанию
Однако, если мы приложим OnClick Ссылки (HTML’s A Tag) Мы можем предотвратить возникновение действий по умолчанию:
В приведенном выше примере мы предотвратили поведение по умолчанию А Элемент (ссылка на открытие), используя Event.PreventDefault () внутри нашего OnClick Функция обратного вызова.
Событие onload.
oepload Событие используется для выполнения функции JavaScript сразу после нагрузки страницы.
Пример:
const body = document.body;
body.onload = myFunction;
function myFunction() {
alert('Page finished loading');
}
Что можно сократить до:
document.body.onload = function() {
alert('Page finished loading');
}
В приведенном выше примере, как только веб-страница загружена, Myфункция Функция будет называться, показывая Страница закончена загрузка оповещение пользователю.
oepload событие обычно прикреплено к элемент. Затем однажды страницы загружена, которая включает в себя все изображения, и CSS и файлы JS, ваш сценарий будет запущен.
Больше информации:
Это только два из множества событий DOM, которые вы можете манипулировать JavaScript, но в основном обычно используются.
Но иногда вам вообще не нужно слушать события DOM, и хотите использовать событие на во времени, как обратный отсчет. Для быстрого руководства по вопросам времени сроки проверки этой статьи.