事件委托和事件对象

事件委托（（原理是事件冒泡））

    

        
西施
        
王昭君
        
李世民
        
董永
    
    
    

    
    

事件对象

在上面我们给事件处理函数一个参数e，他代表的就是事件对象，当事件发生时，可以获取和事件相关的数据

在DOM标准中，是给事件处理函数一个参数(如e)，但是ie老版本中给的是window.event,所以我们需要处理下兼容问题
  // 处理事件对象的兼容
  e = e || window.event;
-------------------------------------------------------------------
通过事件获得真正触发事件的对象，标准的DOM中使用的是target,IE的老版本是srcElement
  // 所以我们需要处理下兼容问题
  var target = e.target || e.srcElement;
-------------------------------------------------------------------
通过事件对象获得事件所在的阶段e.eventPhase
console.log(e.eventPhase);  //返回的是数字，如果是1为捕获阶段，2为目标阶段，3为冒泡阶段
-------------------------------------------------------------------
通过事件获取事件处理函数所属的对象，相当于this
console.log(e.currentTarget);
-------------------------------------------------------------------
通过事件对象获取事件的名称
console.log(e.type)//如果是onclick事件，则返回的名称是click
---------------------------------------------------------------------
通过事件对象e取消默认行为
  取消默认行为
  DOM标准方法
  e.preventDefault();  
  IE的老版本
  e.returnValue = false;
-------------------------------------------------------------------
当事件发生时，可以通过事件对象获取到鼠标当前的坐标
clientX、clientY（相对于浏览器窗口）；pageX、pageY（相对于页面）
//pageX和pageY有兼容问题，从IE9以后才支持,所以我们需要写一个兼容性的函数
pageX = clientX + 页面滚动出去的距离
所以需要获得页面滚动出去的距离

获取页面滚动出去的距离 
document.body.scrollLeft（左边）、document.body.scrollTop（上边）这个也有兼容问题
有些浏览器 是使用这两个属性来获取的（其中documentElement是指文档的根元素，即html标签）
document.documentElement.scrollLeft（左边）、document.documentElement.scrollTop（上边）

     先写获取页面滚动距离的兼容函数
       // 因为我们这个函数返回两个参数，所以可以保存在对象里面
        function getScroll() {
          var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          //返回一个对象
          return {
            scrollLeft:scrollLeft,
            scrollTop:scrollTop
          }
        }

     下面写关于鼠标位置pageX和pageY的兼容函数
        // 因为我们这个函数返回两个参数（X和Y的值），所以可以保存在对象里面
        function getPage(event) {
          利用了上面写的页面滚动距离的兼容函数
          var pageX = event.pageX || e.clientX + getScroll().scrollLeft;
          var pageY = event.pageY || e.clientY + getScroll().scrollTop;
          return {
            pageX:pageX,
            pageY:pageY
          }
        }