【js操作dom对象学习笔记五之事件冒泡、location对象、history对象、定时器】

1.总结addEventListener()和attachEvent()的区别
  
  相同点:都可以为元素绑定事件
  不同点:1.方法名不一样
         2.参数的个数不一样addEventListener三个参数，attachEvent两个参数
         3.addEventListener 谷歌，火狐，ie11支持，ie8不支持
       attachEvent 谷歌火狐不支持，ie11不支持,ie8支持
     4.this 不同 addEventListener中的this是当前绑定事件的对象
        attachEvent中的this是widow
     5.addEventListener中事件的类型(事件的名字)没有on
       attachEvent中的事件类型(事件的名字)有on

2.解绑事件
    对象.on事件名字=事件处理函数--->绑定事件
        对象.on事件名字=null;

    对象.addEventListener("没有on的事件类型",命名函数,false);--绑定事件
    对象.removeEventListener("没有on的事件类型",函数名字,false);

    对象.attachEvent("on事件类型",命名函数);---绑定事件
    对象.detachEvent("on事件类型",函数名字);

3.事件冒泡
    多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了

4.阻止事件冒泡
    ie:window.event.cancelBubble=true;
    谷歌、火狐 e.stopPropagation();

5.事件捕获阶段：从外向内
  事件目标阶段：最开始选择的那个
  事件冒泡阶段：从里向外

  通过e.eventPhase这个属性可以知道当前的事件是什么阶段
  1---->捕获阶段
  2---->目标阶段
  3---->冒泡
  一般默认都是冒泡阶段，很少用捕获阶段

6.键盘抬起事件
  onkeyup

=================================
bom

1.页面加载完毕
  window.οnlοad=function(){}

2.页面关闭后才触发的事件
  window.οnunlοad=function(){}
3.页面关闭之前触发的
  window.οnbefοreunlοad=function(){}

4.location对象
  window.location.hash   --->地址栏上#及后面的内容
  window.location.host   ---->主机名及端口号
  window.location.hostname --->主机名
  window.location.pathname ----->文件的路径--相对路径
  window.location.port     ----->端口号
  window.location.protocol ------>协议
  window.location.search   ------>搜索的内容

  设置跳转的页面的地址
  location.href="http://www.jd.com";(重要)
  location.reload();//重新加载--刷新

5.history对象
  前进(浏览器的前进按钮)
  window.history.forward();
 
  后退
  window.history.back();

6.navigator对象
  通过platform可以判断浏览器所在的系统平台类型
  window.navigator.platform

7.定时器(两个)
 （1）setInterval（常用的 反复的执行）
  参数1:函数
  参数2:时间---毫秒--1000毫秒--1秒
  执行过程:页面加载完毕后，过了一秒执行一次函数代码，又过了一秒执行函数代码
  返回值就是定时器的id值
  
  var timeId =setInterval(function(){alert("hello")},1000);

  停止定时器
  参数:要清理的定时的id的值
  window.clearInterval(timeId)
  
 （2）一次性定时器setTimeout
   var timeId = window.setTimeout(function(){ alert("你好");},1000);

   清除定时器clearTimeout(timeId);