События объектов и фреймов

beforeunload

Событие происходит, перед тем как документ будет выгружен.

error

Событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла.

DOMContentLoaded

Событие происходит, когда браузер полностью загрузил HTML и построил DOM-дерево.

hashchange

Событие происходит при изменении якорной части текущего URL.

load

Событие происходит, когда загрузка объекта завершена.

unload

Событие происходит при выгрузке страницы.

pageshow

Событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю.

pagehide

Событие происходит, когда пользователь уходит со страницы.

resize

Событие происходит при изменении размеров окна браузера.

scroll

Событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.

beforeunload

Событие beforeunload происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения "Вы действительно хотите покинуть эту страницу?". Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.

event.ReturnValue = "пользовательское-Сообщение"

В Firefox будет отображаться только сообщение по умолчанию

Поддерживаемые HTML-теги

Совместимость с браузерами

Да	Да	Да	Да	15,0

Пример

<a href="new.html">Попытайтесь загрузить другую страницу в этот <b>iFrame</b></a>

<script>
window.onbeforeunload = function(event) {
    event.returnValue = "Вы покидаете этот блок....";
};
</script>

error

Поддерживаемые HTML-теги

Пример

<img src="imageN.gif" onerror="f(event)" alt="Для примера" />

<script>
function f(event)
 {
   event = event || window.event;
   var target = event.target || event.srcElement;
    
   alert(target.src + '\nНЕ НАЙДЕН');
 }
</script>

DOMContentLoaded

Событие DOMContentLoaded происходит на document и поддерживается во всех браузерах, кроме IE8-.

Обработчик на него вешается только через addEventListener:

document.addEventListener("DOMContentLoaded", ready);

Пример

<script>
function ready() 
  { alert( 'DOM готов' );
    alert( "Размеры картинки: " + img.offsetWidth + "x" + img.offsetHeight );
  }

document.addEventListener("DOMContentLoaded", ready);
</script>

<span id="demo"></span>   
<img id="img" src="images/yozhik.jpg" />

В этом примере обработчик DOMContentLoaded сработает сразу после загрузки документа, не дожидаясь получения картинки.

Поэтому на момент вывода alert и сама картинка может будет невидна и её размеры – неизвестны (кроме случая, когда картинка взята из кеша браузера).

В своей сути, событие onDOMContentLoaded – простое, как пробка. Полностью создано DOM-дерево – и вот событие. Но с ним связан ряд существенных тонкостей.

DOMContentLoaded и скрипты

Если в документе есть теги <script>, то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов.

Исключением являются скрипты с атрибутами async и defer, которые подгружаются асинхронно.

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

DOMContentLoaded и стили

Внешние стили никак не влияют на событие DOMContentLoaded. Но есть один нюанс.

Если после стиля идёт скрипт, то этот скрипт обязан дождаться, пока стиль загрузится:

Такое поведение прописано в стандарте. Его причина – скрипт может захотеть получить информацию со страницы, зависящую от стилей, например, ширину элемента, и поэтому обязан дождаться загрузки style.css.

Побочный эффект – так как событие DOMContentLoaded будет ждать выполнения скрипта, то оно подождёт и загрузки стилей, которые идут перед <script>.

Автозаполнение

Firefox/Chrome/Opera автозаполняют формы по DOMContentLoaded.

Это означает, что если на странице есть форма для ввода логина-пароля, то браузер введёт в неё запомненные значения только по DOMContentLoaded.

Побочный эффект: если DOMContentLoaded ожидает множества скриптов и стилей, то автозаполнение не сработает до полной их загрузки.

Эмуляция DOMContentLoaded для IE8-

Прежде чем что-то эмулировать, заметим, что альтернативой событию onDOMContentLoaded является вызов функции init из скрипта в самом конце BODY, когда основная часть DOM уже готова:

<body>
  ...
  <script>
    init();
  </script>
</body>

Причина, по которой обычно предпочитают именно событие – одна: удобство. Вешается обработчик и не надо ничего писать в конец BODY.

Если вы всё же хотите использовать onDOMContentLoaded кросс-браузерно, то нужно либо подключить какой-нибудь фреймворк – почти все предоставляют такой функционал, либо использовать функцию из мини-библиотеки jquery.documentReady.js.

Несмотря на то, что в названии содержится слово «jquery», эта библиотечка не требует jQuery. Наоборот, она представляет собой единственную функцию с названием $, вызов которой $(callback) добавляет обработчик callback на DOMContentLoaded (можно вызывать много раз), либо, если документ уже загружен – выполняет его тут же.

Пример использования:

<script src="jquery.documentReady.js"></script>

<script>
  $(function() { alert( "DOMContentLoaded" ); });
</script>

<img src="https://js.cx/clipart/yozhik.jpg?speed=1">
<div>Текст страницы</div>

Здесь alert сработает до загрузки картинки, но после создания DOM, в частности, после появления текста. И так будет для всех браузеров, включая даже очень старые IE.

hashchange

Событие hashchange происходит при изменении якорной части (начинается с символа '#') текущего URL.

Поддерживаемые HTML-теги

Совместимость с браузерами

5,0	8,0	3,6	5,0	10,6

Пример

<p>Из-за разных настроек браузера это событие может не всегда работать должным образом.</p>

<button onclick="changePart()"> Попробуй </button>

<p id="demo"></p>

<script>
window.onhashchange = f;

function changePart() {
 location.hash = "partNew";
 document.getElementById("demo").innerHTML = "location.hash: " + location.hash;
}

function f() { alert("Изменилась якорная часть текущего URL!"); }
</script>

load

Событие load происходит, когда загрузка объекта завершена.

Событие load наиболее часто используется для элемента body, чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится.

Поддерживаемые HTML-теги

Пример

<iframe id="myFrame" style="width:500px" src="help.htm">
</iframe>

<p id="demo"></p>

<script>
document.getElementById("myFrame").onload = function() {f()};

function f() 
  {
    document.getElementById("demo").innerHTML = "Загрузка <b>iframe</b> завершена.";
  }
</script>

unload

Событие unload происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).

Из-за разных настроек браузера это событие может не всегда работать должным образом.

Поддерживаемые HTML-теги

Пример

<html><body onunload="myFunction()">

<p>Закройте это окно ( клик на HTML).</p>
<p><b>Примечание.</b> Из-за разных настроек браузера это событие может не всегда работать должным образом.</p>

<script>
function myFunction() {
    alert("Спасибо за просмотр этой страницы!");
}
</script>

</body></html>

pageshow

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

Поддерживаемые HTML-теги

Совместимость с браузерами

Да	11,0	Да	5,0	Да

Пример

<p>В этом примере используется метод addEventListener () для присоединения к объекту окна события «pagehow».</p>

<p><b>Примечание.</b> Событие «pagehow» не поддерживается в IE10-.</p>

<h1 id="demo"></h1>

<script>
window.addEventListener("pageshow", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Добро пожаловать!";
}
</script>

pagehide

Событие pagehide происходит, когда пользователь уходит со страницы (событие pagehide происходит до события unload). Кроме этого данное событие, в отличие от события unload не препятствует кэшированию страницы.

Поддерживаемые HTML-теги

Совместимость с браузерами

Да	11,0	Да	5,0	Да

Пример

<body onpagehide="myFunction()">

resize

Событие resize происходит при изменении размеров окна браузера.

Совет: Чтобы получить размер окна браузера, используйте свойства clientWidth, clientHeight, innerWidth , innerHeight , outerWidth , outerHeight , offsetWidth и/или offsetHeight.

Поддерживаемые HTML-теги

scroll

Событие scroll происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.

Поддерживаемые HTML-теги

Пример

<style>
.test { background-color: yellow; }
#myP { position: fixed; top: 50px; left: 50px; font-size: 24px;
       width: 500px; text-align: center;}
</style>

<p id="myP"></p>
<p style="margin-top:800px"></p>

<script>
var p = document.getElementById("myP"), t = 'Прокрутите страницу вниз';
p.innerHTML = t;
window.onscroll = function() {myFunction()};

function myFunction() 
  { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) 
      { p.className = "test"; 
        p.innerHTML = "А теперь прокрутите страницу вверх"
      } 
   else { p.className = ""; p.innerHTML = t;     }
  }
</script>