1.DOM2级事件：

2. 事件三要素
   1.事件源： dom
   2.事件类型 click
   3.事件处理程序; function (){};
   3.事件的绑定方式：
   1.html的事件处理程序
   <button onclick="fun()">点击执行</button>
   fun函数有权访问页面中所有的全局变量;
   2.DOM0级事件;
   dom.onclick = function(){
   console.log(this);//被绑定的元素 dom;
   }
   3.DOM2级事件
   语法：dom.addEventListener("事件类型",事件处理程序,布尔值);
   例如：box.addEventListener("click",函数名/回调函数,布尔值);
   注意：事件类型不加on;
   4.事件流：事件的执行顺序：
   事件执行分三个阶段：
   1. 事件捕获阶段
   2. 捕获目标阶段
   3. 事件冒泡阶段
   1、事件捕获：由最不具体的元素到最具体的元素的一个执行顺序;
   box.addEventListener("click",函数名/回调函数,true);
   2、事件冒泡：由最具体的元素到最不具体的元素的一个执行顺序;
   box.addEventListener("click",函数名/回调函数,false);
   注意：默认是false;
   5.事件委托：通过事件冒泡的机制 把事件委托给父元素/父级元素;
   DOM2事件委托写法：
   dom.addEventListener("click",function(e){
   var tag = e.target;//获取目标元素;
   if(){
   1. 通过标签名去判断
   tag.NodeName=="SPAN"
   2.通过类名是否存在
   tag.classList.contains("active")
   3. 通过自定属性去判断;
   tag.getAttribute("data-index")==2;
   ......
   }
   });
   6.事件对象方法的兼容：
   1.事件对象：
   谷歌：e
   IE:window.event;
   例如： dom.addEventListener("click",function(e){
   var e = e||window.event;//兼容事件对象;
   }
   2.兼容被触发的元素：
   谷歌下：e.target;
   IE: e.srcElement;
   例如： dom.addEventListener("click",function(e){
   var e = e||window.event;//兼容事件对象;
   var tag = e.target||e.srcElement;//兼容触发的元素;
   }
   3.阻止冒泡：
   谷歌下：e.stopPropagation();
   IE下：e.cancelBubble = true;
   4.阻止默认行为：
   谷歌：e.preventDefault();
   IE: e.returnValue=false;
   5.DOM2级绑定：
   1. 谷歌下绑定：
   语法：dom.addEventListener("事件类型",处理程序,布尔值);
   2. 谷歌下删除事件：
   语法：dom.removeEventListener("事件类型",处理程序,布尔值);
   注意：事件处理程序不能是匿名函数 必须是函数名;
   6.IE下的绑定和解除;
   1. 绑定：
   dom.attachEvent("on"+事件类名,事件处理程序);
   2.解除绑定：
   dom.detachEvent("on"+"事件类型",事件处理程序);

3. 位置方法
   1.内宽高
   1. 元素的内高度：
   dom.clientHeight; // height+padding;
   2.内宽度：
   dom.clientWidth;//width+padding;
   2.外宽高
   1.dom.offsetWidth;//width+左右padding+左右border;
   2.dom.offsetHeight;//height+上下padding+上下border;
   3.获取屏幕可视区宽高
   1. window.innerWidth;
   2. window.innerHeight;
   2.位置获取;

   1. 获取点击位置到元素左上角的距离;
      1. e.offsetX;
      2. e.offsetY;
         注意：元素左上角是(0,0)点;
         2.鼠标在屏幕上的坐标
      3. e.clientX;
      4. e.clientY;
         3.鼠标在页面中的坐标
      5. e.pageX;
      6. e.pageY;
         注意：在没有滚动条的情况下 是一样的;
         4.元素相对于已定位的父元素或者父级元素的距离;
      7. dom.offsetLeft;
      8. dom.offsetTop;
         5.获取已定位的父元素或者父级元素
         语法：dom.offsetParent;
         3.获取元素的尺寸集合：
         语法：dom.getBoundingClientRect();