event事件

1. *****event:
   事件: 用户手动触发的，或浏览器自动触发的状态的改变
   事件对象: 在事件发生时，自动创建的，专门封装事件信息的对象。
   事件处理函数: 在事件发生时，自动调用执行的函数
      何时调用事件处理函数: 在事件发生时，自动调用
      如何调用: elem.on事件名()
      如何定义事件处理函数：3种
为 elem.on事件名 赋值一个函数对象
      1. 在HTML中定义事件处理函数的内容：
<elem onXXX="js语句"
        比如: <button οnclick="alert(this)">
        定义时:相当于:
  elem.onXXX=function(){
      eval("js语句");
  }
比如: button.οnclick=function(){//this->button
      eval("alert(this)");
     }
运行时:
 elem.onXXX()
          this: elem


function fun(){alert(this.id)};//this->window
        <button οnclick="fun()"
        相当于:button.οnclick=function(){//this->button
    eval("fun()");
               }


        缺点: 1. 不符合内容与行为分离的原则
              2. 无法动态绑定
              3. 无法同时绑定多个函数对象


      2.在js中使用元素的事件处理函数属性:
elem.onXXX=function(){}
        调用时: elem.onXXX();
          this: elem
        优: 1. 内容与行为分离
            2. 动态绑定，便于维护
        缺: 1. 无法同时绑定多个函数对象
      
      3.使用专门的API绑定事件处理函数
DOM: elem.addEventListener("事件名",函数对象);
调用时: elem.onXXX();
          this: elem
        优: 1. 内容与行为分离
            2. 动态绑定，便于维护
            3. 可同时绑定多个函数对象
        IE8: elem.attachEvent("事件处理函数名",函数对象)


   事件周期:从事件发生，到所有事件处理函数执行完毕的全过程。
       DOM: 3个阶段: 
1. 由外向内 捕获阶段
   捕获：记录所有要执行的事件处理函数
        2. 目标出发: 优先出发目标元素上的事件处理函数
    目标元素: 实际发生事件的元素
        3. 由内向外 冒泡执行
       IE8: 2个阶段: 没有捕获！


   改变事件触发的顺序: 
     设置事件处理函数在捕获阶段就提前执行
     如何设置: addEventListener(xx,xx,capture)
         capture为true: 在捕获阶段提前执行
                为false: 在冒泡阶段执行 （默认）
     只有DOM的addEventListener可修改触发顺序
   IE的attachEvent，没有第三个参数，不能修改事件触发顺序

   事件对象e:
    DOM: event会自动作为事件处理函数的第一个参数传入   
    其实定义事件处理函数时:
elem.onXXX=function(e){
   e->event
        }
elem.addEventListener("xxx",function(e){
   e->event
},false)
    调用时: elem.onXXX(event)


    IE8: window全局有一个属性event，在事件发生时，保存事件对象。
elem.onXXX=function(){
   window.event
        }
    兼容: elem.onXXX=function(e){
   e=window.event||e;
                  IE8       DOM
         }


   取消冒泡和利用冒泡:
   1. 取消冒泡: 本次事件处理函数执行后，阻止继续冒泡触发
如何取消冒泡: 
        DOM: e.stopPropagation()
        IE8: e.cancelBubble=true;  
        兼容:if(e.stopPropagation){//DOM
e.stopPropagation();
             }else{
e.cancelBubble=true;
             }
   2. 利用冒泡: 
     优化: 如果多个子元素都定义了相同的事件处理函数。
         最好只在父元素上定义一次即可！
     为什么: 每绑定一次事件处理函数，其实都是创建一个事件监听对象。创建事件监听越多，网页效率就越低。


     获取目标元素:
DOM: e.target
        IE8: e.srcElement
        兼容:var target=e.target||e.srcElement; 


   取消事件: 如果事件处理函数的执行过程中，遇到问题，不希望事件继续执行，则可取消事件
      DOM: e.preventDefault();
      IE8: e.returnValue=false;   


   事件发生时，鼠标的坐标位置: 见图:xy.png


   移除事件绑定: 
     elem.removeEventListener("事件名",函数对象);
   强调:remove时要求，函数对象必须和add时使用的函数对象完全一样
    只要一个事件处理函数可能被移除，就必须用函数名方式绑定。不能用函数直接量方式。
    如果一个事件没有被移除的可能，才能用函数直接量方式绑定。