浏览器window对象及事件

浏览器window对象

---

location对象

window.location === document.location (true)

解析URL

1. location的href属性是一个字符串，包含URL完整文本
2. protocol，host，hostname，port，path name，search表示url的各个部分
3. 重点 hash 和 search 属性
   1. hash返回“片段标识符”即#之后的内容
   2. search返回？之后的url

---

载入新文档

1. assgin() 使窗口载入并显示指定URL中的文档，保留浏览历史；
2. replace（）与assign类似但是不保留浏览历史，ex：如果不支持ajax就location.replace()到另外一个文档
3. reload（）重新加载当前文档

   location = "baidu.com"; // 跳转外链
   location = "page1.html"; // 跳转到下一个页面
   location = "#top"; // 跳转到锚点，top表示跳转到文档顶部
   location.search = "?page=" + ()pagenum + 1); // 新页面
   

Screen对象

提供有关窗口显示大小和可用颜色数量的信息

1. 属性 width和height指的是以像素为单位的窗口大小。
2. availWidth和alailHeight指的是实际可用显示大小，除却dock栏。

---

事件

冒泡和捕获

1. 一般是在冒泡中为节点添加事件；

事件处理

1. html级：

2. dom0级：每个元素都有自己的事件处理属性；

   var btn = document.getElementById('myBtn');
   btn.onclick = function(){
   alert(this.id) // "myBtn" this指向当前元素 冒泡阶段被处理
   }
   btn.onclick = null; // 删除事件处理程序
   

3. dom2级： addEventListener 和 removeEventListener

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){
        alert(this.id);
    }, false)
    btn.addEventListener("click", function(){
        alert("Hello World!");
    }, false)
    // 最后一个参数true表示在捕获阶段触发，false表示在冒泡阶段触发
    // 通过 addEventListenr 添加的事件必须通过 removeEventListener 删除 在删除的时候 function必须是具名函数才能够删除，否则是无效的
    var handler = function(){};
    addEventListner("click", handler, false);
    removeEventListner("click", handler, false);
   

   tip：event.stopPropagation()可以阻止事件冒泡，就只事件对象本体触发

4. IE 呵呵

---

事件对象

UI

• load window.onload / img.onload 嵌入内容加载完毕时在对象上触发tip所有内容加载完毕，包括css，js，dom

• unload 嵌入内容卸载完毕触发

• abort 用户停止下载过程，如果嵌入内容没有加载完成，在加载对象上触发

• error window.error js代码出错时候，img加载出错时候；

• select 略

• resize window.resize 窗口大小发生变化时；

• scroll 滚动 带滚动条元素时 ，在该元素上触发；

• DOMContentLoaded Dom树完成就会触发，早于load事件；

• hashchange #url发生变化；window.onhashchange = function (event){};

• **orientationchange (safari)/ deviceorientation ** 设备方向

• devicemotion 设备移动
  tip: window上发生的任何时间都可以在中通过相应特性来指定

  window.onload = function() {
  var div = document.getElementById("myDiv");
  div.addEventListener("contextmenu", function(event){
      event.preventDefault();
  })
  }   
  

  性能优化

  为元素添加大量的事件处理程序会占用过高的内存，影响整体性能；处理这种情况：

  事件委托

  利用事件冒泡，指定一个事件处理程序管理某一类型的所有事件，尽量向最高层级中添加事件处理程序。例如

  ul li li li 
  ul.onlick = function() {
      switch (target) {
      case li1:
      case li2:
      case li3:
  }}
  

  移除事件处理程序

  li.onclick = null/removeEvent

  模拟事件

  ！！！

  DOM操作

  • scrollIntoView dom.scrollintoView() true/false true顶部对其，false底部对其
  • scrollByPage safari chrome
  • scrollTop scrollLeft 隐藏的 高和宽 scrollHeight scrollWidth doc总高宽