DOM & window & document & html & body All In One

DOM & window & document & html & body All In One

const html = document.querySelector('html');
const body = document.querySelector('body');

const pre = document.querySelector('#pre');

const textArea = document.querySelector('#events-order');
const reload = document.querySelector('#reload');

reload.addEventListener('click', () => {
  textArea.textContent = '';
  pre.innerHTML = '';
  // pre.innerText = '';
  window.setTimeout(() => {
    window.location.reload(true);
  }, 0);
});

document.addEventListener('readystatechange', (event) => {
  const order = document.readyState === 'complete' ? 3 : 1;
  console.log('readyState', order);
  textArea.textContent += `readyState: ${document.readyState}, ${order}\n`;
  pre.insertAdjacentHTML('beforeend', `<span>readyState: ${document.readyState, order}</span><br/>`);
  // pre.insertAdjacentText('beforeend', `<span>${}</span><br/>`);
});

html.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded', 2);
  textArea.textContent += `DOMContentLoaded, 2\n`;
});

html.addEventListener('load', () => {
  console.log('load', 4);
  textArea.textContent += 'load, 4\n';
});

html.addEventListener('beforeunload', () => {
  console.log('beforeunload', 7);
  textArea.textContent += 'beforeunload\n';
  // Beacon AP
});

html.addEventListener('unload', () => {
  console.log('unload', 8);
  textArea.textContent += 'unload\n';
});

//
html.addEventListener('pageshow', () => {
  console.log('pageshow', 5);
  textArea.textContent += 'pageshow\n';
});
html.addEventListener('pagehide', () => {
  console.log('pagehide', 6);
  textArea.textContent += 'pagehide\n';
});

// Page Visibility API
html.addEventListener('visibilitychange', () => {
  console.log('visibilityChange', );
  console.log('document.hidden', document.hidden);
  console.log('document.visibilityState', document.visibilityState);
  textArea.textContent += `document.hidden ${document.hidden}\n`;
  textArea.textContent += `document.visibilityState ${document.visibilityState}\n`;
}, false);


// ???
const bindEventsLength = html.eventsLength ?? 0;
console.log('bindEventsLength =', bindEventsLength);

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---