其他事件

| JavaScript, JS事件

session 历史事件

hashchange 事件:URL 的 hash 部分（即#号后面的部分，包括#号）发生变化时触发,一般在window对象上监听

window.addEventListener('hashchange', myFunction);

function (e) {
  console.log(e.oldURL);
  console.log(e.newURL);
}

location.hash = 'part2';
// http://www.example.com/
// http://www.example.com/#part2

网页状态事件

• DOMContentLoaded :网页下载并解析完成以后，浏览器就会在document对象上触发

  仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多。

  document.addEventListener('DOMContentLoaded', function (event) {
      console.log('DOM生成');
  });
  

• readystatechange()：当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发

  // loading：网页正在夹杂
  // interactive：网页解析完成，外部资源仍在加载
  // complete：网页解析完成，外部资源加载完成，即将出发load事件
  document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
      // ...
  }
  }
  

窗口事件

• scroll 事件：文档或文档元素滚动时触发，主要出现在用户拖动滚动条
  结合节流函数进行监听

  // 限制在一秒一次
  function throttle(fn, wait) {
      var time = Date.now();
      return function() {
          if ((time + wait - Date.now()) < 0) {
          fn();
          time = Date.now();
          }
      }
  }
  
  window.addEventListener(大专栏  其他事件s="string">'scroll', throttle(callback, 1000));
  

  debounce是防抖，连续操作结束后执行
  throttle节流，确保一段时间内只执行一次
  所以用户滚动应该使用节流

• resize事件：浏览器窗口大小时触发，主要发生在window对象上面

  var resizeMethod = function () {
      if (document.body.clientWidth < 768) {
          console.log('移动设备的视口');
      }
  };
  
  window.addEventListener('resize', resizeMethod, true);
  

焦点事件

发生在元素节点和document对象上面，与获得或失去焦点相关。它主要包括以下四个事件。

• focus：元素节点获得焦点后触发，该事件不会冒泡。
• blur：元素节点失去焦点后触发，该事件不会冒泡。
• focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。
• focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。
  这些事件继承了FocusEvent接口，具有以下属性：
• FocusEvent.target：事件的目标节点。
• FocusEvent.relatedTarget：对于focusin事件，返回失去焦点的节点；对于focusout事件，返回将要接受焦点的节点；对于focus和blur事件，返回null。

// 表单的文本输入框，接受焦点时设置背景色，失去焦点时去除背景色
// focus和blur事件不会冒泡，只能在捕获阶段触发，所以addEventListener方法的第三个参数需要设为true。
form.addEventListener('focus', function (event) {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', function (event) {
  event.target.style.background = '';
}, true);

---