浏览器交互：BOM和DOM相关webApi、监听事件

（1）BOM 浏览器对象模型（Browser Object Model）
浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，
其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

1.BOM的顶级对象window
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
注意：window下一个特殊的属性 window.name
a.对话框 包括alert(),prompt(),confirm()
b.页面加载事件：onload,onunload()
例子:
window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
c.定时器setTimeout()和clearTimeout()在指定的毫秒数到达之后执行指定的函数，只执行一次
setInterval()和clearInterval()定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
e.location对象:location可以获取或者设置浏览器地址栏的URL
例子：window.location.hash，window.location.host

f.URL统一资源定位符
g.history对象:back(),forward(),go()
h.navigator对象
例子： 
//通过userAgent可以判断用户浏览器的类型
   
 console.log(window.navigator.userAgent);
    
//通过platform可以判断浏览器所在的系统平台类型.
    
console.log(window.navigator.platform);

（2）DOM文档对象模型（Document Object Model，简称DOM）提供访问和操作网页HTML内容的方法和接口

  DOM是中立于平台和语言的接口，
文档树结构：
1.文档：一个网页可以称为文档
2.节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
3.元素：网页中的标签
4.属性：标签的属性

1.DOM节点和属性
元素节点对象的获取方式: 
    
 getElementById():  获取特定ID元素的节点对象(返回一个对象)
    
 getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
   
  getElementsByName():  获取相同name属性值的节点列表(返回一个数组)

元素节点的属性
     
tagName: 元素节点对象所指向的标签名称
     
innerHTML: 元素节点中的内容
     
className: 元素节点的class属性值
     
style: css内联样式对象
     
children: 某元素的所有子元素节点
     
value: 输入框的内容

2.DOM操作
DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.
DOM操作所涉及的方法有: 
       
 createElement(); 创建一个元素节点
       
 appendChild(); 添加一个新子节点到子节点的末尾
        
createTextNode(); 创建一个文本节点
        
insertBefore(); 将新节点插入到某节点前面
       
 replaceChild(); 将新节点替换旧节点
        
cloneNode(); 复制节点
        
removeChild(); 移除节点

（3）监听事件

  脚本模式: 
        脚本模式能将JS代码和HTML代码分离, 符合代码规范. 
        使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件; 如我们可以采用三种方式   来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()
 
添加事件的方法：
  例如: 
  var box = document.getElementById('box'); 
  添加事件方式一 :  通过匿名函数，可以直接触发对应的代码 (推荐)
  box.onclick = function() {  //给box节点对象添加点击事件onclick
           console.log('Hello world!'); 
  };
 
  添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数
  box.onclick = func;    //注意这里不能写成func()
  function func() {        //给box节点对象添加点击事件onclick
           console.log('Hello world!'); 
  };

（4）事件的分类
JavaScript可以处理的事件种类有3种：鼠标事件，键盘事件和HTML事件。
1.鼠标事件，页面所有元素都可触发鼠标事件
click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseenter,mouseleave

2.键盘事件，在键盘上按下键触发的事件，一般由window对象或document对象调用
keypress,keydown,keyup
例如：window.οnkeyup=function(){

}
3.HTML事件：跟HTML页面相关的事件
load,unload,select,change,focus,blur,submit,reset
例子 
window.onload = function() { 
              console.log('页面已经加载完毕'); 
      };

input.onselect = function() { 
              console.log('选择了文本框中的内容'); 
      };
      
（5）事件对象Event
 通过事件的执行函数传入的event对象(事件对象) 不是在所有浏览器都有值,  
在IE浏览器上event对象并没有传过来, 这里我们要用window.event来获取, 
而在火狐浏览器上window.event无法获取, 而谷歌浏览器支持event事件传参和window.event两种, 
为了兼容所有浏览器, 我们使用以下方式来得到event事件对象: 
 
box.onclick = function(evt){ 
     var e= evt || window.event; //获取到event对象(事件对象)
     console.log(e);
};
 
其中window.event中的window可以省略, 最终我们可以写成: 
box.onclick = function(evt){ 
     var e= evt || event; //获取到event对象(事件对象)
     console.log(e);
};
 
注意: evt||event不要倒过来写

事件对象Event的属性:
 
    button: 鼠标按键
    clientX: 浏览器可视区域的x坐标
    clientY: 浏览器可视区域的y坐标
    pageX: 浏览器内容区域的x坐标
    pageY: 浏览器内容区域的y坐标
    screenX: 显示器屏幕的x坐标
    screenY: 显示器屏幕的y坐标
    offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
    offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

原文1

原文2