《javascript高级程序设计》学习记录（六）

js中的事件
（1）IE中的事件冒泡
事件最开始的时是由最具体的事物接收，然后逐级向上传播到较为不具体的节点，换句话就是事件沿着DOM树向上传播，直到传到document对象，
(2)事件捕获
  事件捕获是指事件由不具体的节点接收，最具体的节点应该最后接收，也就是从document对象传到目标对象。
 由于老版本的浏览器不支持，所以很少有人使用事件捕获，一般建议使用事件冒泡
 
 （3）DOM2级事件
 规定事件流包括三个阶段：时间捕获阶段，处于目标阶段和冒泡阶段，首先发生的是事件捕获，为截获时间提供了机会，然后就是实际的目标接收到事件，最后一个阶段就是冒泡阶段，其中处于目标阶段被看成是冒泡阶段的一部分，

 （4）DOM0级事件处理程序
 eg：var result = document.getElementById('btn');
     result.onclick = function(){
        alert("I've been clicked");
     }

  (5)DOM2级事件处理程序
  var result = document.getElementById('btn');
  result.addEventListener("click",function(){
      alert('I've been clicked');
  },false);
函数addEventListener()接收三个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，最后一个参数的值如果是true，表示在捕获阶段调用事件处理 程序，如果是false，表示在冒泡阶段调用事件处理程序，该函数只能使用removeEventListener()；来移除，但是下面这种情形是无法移除的，也就是当第二个参数是匿名函数的时候：

   var btn = document.getElementById('btn');
      btn.addEventListener('click',function(){
        alert('click');
      },false);

      btn.removeListener('click',function(){
        alert('click');
      },false);

如果改成下面这样的话就可以：
     function click(){
         alert('click');
      }
      var btn = document.getElementById('btn');
      btn.addEventListener('click',click,false);

      btn.removeEventListener('click',click,false);

 (6)IE事件处理程序
 在IE浏览器中，事件处理程序要靠attachEvent()函数，该函数有两个参数，第一个参数是事件类型，和addEventListener()中的第一个参数不同的是，这里的事件类型是"on"+click组成，第二个参数还是一个函数。移除事件的函数是detachEvent()，和上面一样，如果该函数的第二个参数是匿名函数的话，那么事件也是不能移除的，如下例：
    var btn = document.getElementById('btn');
    
      btn.attachEvent('onclick',function(){
         alert('click');
      });
      btn.detachEvent('onclick',function(){
         alert('click');
      });
    如果改成这样就可以,支持IE事件处理程序的浏览器有IE和Opera，在IE的事件处理程序的两个函数中，事件处理程序会在全局作用域中进行，所以this指向window

  根据上面三种事件处理程序，可以写出如下的兼容性的事件处理程序：
         var addEvent = {
          addHandler:function(elem,type,handler){
              if(elem.addEventListener){
                 elem.addEventListener(type,handler,false);
              }else if(elem.attachEvent){
                 elem.attachEvent('on'+type,handler);
              }else{
                 elem['on'+type] = handler;
          }
       },

         removeHandler:function(elem,type,handler){
             if(elem.removeEventListener){
                elem.removeEventListener(type,handler,false);
                }else if(elem.detachEvent){
                  elem.detachEvent('on'+type,handler);
                }else{
                  elem['on'+type] = null;
                }
             }
    };

    (7)IE和其他浏览器的一些不同点
    1:获取事件的目标：IE中是event.srcElement,而现代浏览器是event.target
    2:获取事件对象，IE中是window.event,而其他浏览器是event
    3:阻止事件的默认行为，IE中是event.returnValue = false,其他浏览器是event.preventDefault()
    4:阻止冒泡：IE是event.cancelBubble = true,其他是event.stopPropagation();

    (8)事件类型：
    UI事件，焦点事件，鼠标事件，滚轮事件，文本事件，键盘事件，合成事件，变动事件等等

    （9）在混杂模式中，使用document.body，在标准模式中，用document.documentElement来获取一些数据
    clientX，clientY获取在浏览器视口中的位置
    pageX,pageY获取在页面中的位置坐标
    screenX和screenY获取在整个电脑屏幕中的位置
    其中，在页面没有发生滚动的情况下，pageX和pageY的值和clientX和clientY的值相同。这些都是针对于event对象的